javascript - jQuery: force display of modified dom - Stack Overflow

admin管理员组

文章数量:1391947

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 pleted.

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.

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 pleted.

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.

• javascript
• jquery
• tablesorter
• spin.js

Share Improve this question Follow asked Jan 9, 2013 at 2:54 user1840734user1840734 35711 gold badge55 silver badges1313 bronze badges 3

• 1 by the way - can't review answers for 5 days as out of internet range on holiday :-) – user1840734 Commented Jan 9, 2013 at 2:55
• I thought I'd leave a note here to check out my fork of tablesorter. I tried to make a demo for you on jsFiddle, but it couldn't handle the 3800+ table rows, but on my desktop I found that a sort was taking roughly 3 seconds. It would be even faster if you don't use the zebra widget and apply row coloring using css (tbody tr:nth-child(odd)). – Mottie Commented Jan 9, 2013 at 4:27
• Hi Mottie, thanks for the link to that - I wish I'd found that a couple of weeks ago. My googleFoo let me down. I'll push on with what I have now. Cheers, Bryce. – user1840734 Commented Jan 14, 2013 at 2:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptjQuery force display of modified domStack Overflow