jQuery: force display of modified dom

Question

I've run in to a problem trying to have a 'loading spinner' on my page which runs while a table is being sorted, especially for slower clients as can take up to 10 seconds to sort the page. I can see the DOM gets modified with the spinner code, however it does not display. I was hoping there may be something I can do to force this display of spinner before the sort happens, and of course stop it when the sort is completed.

My sort is based on 'sorttable.js' which I have modified to handle a secondary sort on the first column of table (with names in it).

My spinner uses 'spin.js'.

I'm still a novice with this jQuery stuff, and this sorttable code is rather involved. I highlight portions below, but my full modified sorttable code (for now) can be found at 'sorttable-TESTING-ONLY.js' with a test html page at 'TESTING-ONLY-sort_and_spin.htm'.

So, script sets up some functions when page loads ("....." means lines skipped):

makeSortable: function(table) {                          //line 75
  ......
  headrow = table.tHead.rows[0].cells;

  for (var i=0; i<headrow.length; i++) {                 //line 114
    .....
    headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);   //line 126

    // code to start/stop spinner
    headrow[i].sorttable_spinner = (function(val) {      //line 136
      return function(val) {
        var $this = $(this),
        data = $this.data();

        if (data.spinner) {
          data.spinner.stop();
          delete data.spinner;
        }
        if (val > 0) {
          var opts = {
            .......
           };
           data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
           // can see spinner added to DOM but does not display...
         }
    }})(i);

Code them creates a clickable event handler for column headers:

headrow[i].sorttable_columnindex = i;                            //line 171
headrow[i].sorttable_tbody = table.tBodies[0];

dean_addEvent(headrow[i],"click", function(e) {                  //line 176
   .... does some stuff with class names, etc

   this.sorttable_spinner(1);    // set spinner on             //line 224

   .... builds array to do sort then calls sort functions
   if (sort_direction == 'forward') {                            //line 247
     row_array.sort(this.sorttable_sortfunction); 
   } else {
     row_array.sort(this.sorttable_reversesortfunction);
   }

   tb = this.sorttable_tbody;
   for (var j=0; j<row_array.length; j++) {
     tb.appendChild(row_array[j][2]);
   }
   delete row_array;

   this.sorttable_spinner();  // now stop the spinner            //line 261

This all looks like it should be working. In Firefox with firebug I see the DOM get loaded with the spinner code, I see it rotating in the browser, and line to turn off spinner removes it from DOM. BUT, if I'm not in debug mode, only running it, then no spinner is displayed? (debugging with IE10 doesn't even display the spinner).

I tried .show() in various places but always get told not an available function. Saw a reference to window.setTimeout( function () {... to give seperate process for sort but couldn't understand how to implement that in this situation.

If anyone could give me some pointers that would be greatly appreciated.

Regards, Bryce S.

Answer 1

Basically, JavaScript only has one thread for your code and UI together. That means, if your code does not relinquish control, the UI does not get shown until you do. So, in this sort of code:

spinner_on();
dostuff();
spinner_off();

What happens is, you insert spinner into DOM, do stuff, remove spinner, relinquish control - and UI is updated at last, with no spinner (because, at this moment, it does not exist any more).

The basic pattern should be this:

spinner_on();
setTimeout(function() {
  dostuff();
  spinner_off();
}, 0);

This works as following: insert spinner into DOM, schedule something, relinquish control. UI gets updated (with spinner). Scheduled function runs: stuff gets done, spinner gets removed from DOM, control gets relinquished again. UI is updated (without the spinner).

When you're in a debugger, the debugger rips control from your code's fingers, so you can see your spinner in the UI while your code is on hiatus.