title: How to use promises, or complete an ajax request before the function finishes?
body: <p>I have the following function to check a users session to see if they're staff or not. Now, I know there are better ways to do this, but I'm trying to make a simple application that's tied with a forum software.</p>
  
  <pre><code>function isStaff(callback) {
      $.ajax({
          url: url
      }).done(function(data) {
          var session = $.parseJSON(data);
          if (session.is_staff === 1) {
              callback(true);
          } else {
              callback(false);
          }
  
      });
  }
  </code></pre>
  
  <p>Let's say I'm using this function in, like so, when compiling a "post" (Handlebars).</p>
  
  <pre><code>function compilePost(post) {
      var source = $('#feed-item-template').html();
      var template = Handlebars.compile(source);
      var context = {
          id: post.id,
          content: post.text,
          author: post.author,
          date: $.timeago(post.date),
          staff: function() {
              isStaff(function(response) {
                  return response;
              });
          }
      }
      var html= template(context);
      return html;
  }
  </code></pre>
  
  <p>Problem here, is that the request to check if a user is staff doesn't complete the request until after the function is ran.</p>
  
  <p>I know with Promises is an alternative to async: false, where request is made and the response comes back before the function finishes. </p>
  
  <p>But I have no idea how I can convert this into a promise. I've tried to learn it but I'm stuck at the concept. Can someone explain this to me? Thanks.</p>