title: Showing "waiting" modal _before_ my lengthy table sort starts (and disappear afterwards)
body: <p>I just want to do three things in order. </p>
  
  <p>My table has thousands of rows and takes a while to sort. I would like my "waiting" modal to display during the sort, but the page waits for the sorting to complete before attempting to display the modal. </p>
  
  <p>Here's a <a href="http://jsfiddle.net/pxworys0/14/" rel="nofollow noreferrer">jsfiddle</a>. (You can increase or decrease <code>bignumber</code> to get a sorting delay you can see but isn't annoying.)</p>
  
  <p>I first tried:</p>
  
  <pre><code>//CSS:   body.loading .waitingModal {display: block;}
  
  $('body').toggleClass("loading");         // happens second!
  sortTable(currentdirection,columnno);     // takes ages and happens first
  $('body').toggleClass("loading");         // happens third
  </code></pre>
  
  <p>If I comment out the last line or cause an error before it, the table sorts, <strong>then</strong> the modal appears. </p>
  
  <p>Thanks to <a href="https://stackoverflow.com/questions/14227611/jquery-force-display-of-modified-dom?rq=1">this question</a>, my next attempt worked once but then the loading modal never came again:</p>
  
  <pre><code>$('body').toggleClass("loading");   
  setTimeout(function() {           //loading works but not if you click again
      sortTable(order,1);
      $('body').toggleClass("loading");
  }
  </code></pre>
  
  <p>Web pages advising people suggest I should use <code>jQuery.Deferred</code> rather than entangle myself in callback hell, and since I couldn't see where to put a callback and callback hell doesn't sound fun I went along with it.</p>
  
  <p>I read questions on <a href="https://stackoverflow.com/questions/4869609/how-can-jquery-deferred-be-used">How to use jQuery deferred</a> and <a href="https://stackoverflow.com/questions/5436327/jquery-deferreds-and-promises-then-vs-done">then vs done</a> and most promisingly, <a href="https://stackoverflow.com/a/9601230">this answer's Example 1 of chaining</a>, but everyone seems to assume I have a deferred/promise already turning up from some ajax call or something.</p>
  
  <p>My first attempt to chain some <code>.then(...)</code> calls didn't work, because literally nothing happened:</p>
  
  <pre><code>$.Deferred().then(function(){
      $('body').toggleClass("loading");    //doesn't happen
  }).then(function(){
      sortTable(order,1);                  //doesn't happen
  }).then(function(){
      $('body').toggleClass("loading");    //doesn't happen
  });
  </code></pre>
  
  <p>Using the <code>beforeStart</code> parameter got my modal displayed, but nothing else:</p>
  
  <pre><code>$.Deferred(function(it){
      $('body').toggleClass("loading");    //happens first, hooray!
  }).then(function(){
      sortTable(order,1);                  //doesn't happen
  }).then(function(){
      $('body').toggleClass("loading");    //doesn't happen
  });
  </code></pre>
  
  <p>I then tried to chain some deferred <code>then</code>s, resolving and passing the deferred explicitly, but I clearly don't understand how this works:</p>
  
  <pre><code>$.Deferred().then(function(it){
      $('body').toggleClass("loading");    //still happens second
      it.resolve();
      return it.promise();
  }).then(function(){
      sortTable(order,1);                  //happens first
  }).then(function(){
      $('body').toggleClass("loading");    //happens third
  });
  </code></pre>
  
  <p>Lastly, I've tried resolving a <code>deffered</code> on the change event on the body</p>
  
  <pre><code>function loadingNow(){
      var deferred = $.Deferred();
      $('body').toggleClass("loading")     // happens
        .change(function(){
          deferred.resolve()
      });
      return deferred.promise();
  }            
  loadingNow().then(function(){
      sortTable(order,1);                  //doesn't happen
  }).then(function(){
      $('body').toggleClass("loading");    //doesn't happen
  });
  </code></pre>
  
  <p>Doesn't matter if I toggle the class after adding the change event handler:</p>
  
  <pre><code>function loadingNow(){
      var deferred = $.Deferred();
      $('body').change(function(){
          deferred.resolve()
      }).toggleClass("loading");    // happens
      return deferred.promise();
  }            
  loadingNow().then(function(){
      sortTable(order,1);                  //doesn't happen
  }).then(function(){
      $('body').toggleClass("loading");    //doesn't happen
  });
  </code></pre>
  
  <p>Honestly, I didn't expect it to be this difficult to persuade jQuery to do three things in order. Perhaps there's a much simpler thing I haven't thought of. I don't mind if it's callbacks or <code>Deferred</code> done right, but if it's brief and relatively clear that would be a huge bonus.</p>