jQuery:强制显示修改后的dom

Question

我遇到了一个问题,试图在我的页面上运行一个"加载微调器",该表在一个表被分类时运行,特别是对于较慢的客户端,因为对页面进行排序可能需要10秒钟.我可以看到使用微调器代码修改DOM,但是它不会显示.我希望在排序发生之前我可以做些什么来强制显示微调器,当然也可以在排序完成时停止它.

我的排序基于'sorttable.js',我已经修改它来处理表的第一列的二级排序(其中包含名称).

我的微调器使用'spin.js'.

我仍然是这个jQuery东西的新手,而且这个可排序的代码非常复杂.我突出显示了下面的部分,但我的完整修改后的可排序代码(现在)可以在'sorttable-TESTING-ONLY.js'找到, 并在'TESTING-ONLY-sort_and_spin.htm'上有一个测试html页面.

因此,脚本在页面加载时设置一些函数("......"表示跳过行):

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);

代码为列标题创建可点击的事件处理程序:

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

这看起来应该是有效的.在使用firebug的Firefox中,我看到DOM加载了微调器代码,我看到它在浏览器中旋转,并且关闭微调器的行将其从DOM中删除.但是,如果我没有处于调试模式,只运行它,那么没有显示微调器？(使用IE10进行调试甚至不显示微调器).

我在各个地方尝试过.show(),但总是被告知没有可用的功能.看到一个引用window.setTimeout( function () {...给出单独的进程进行排序但在这种情况下无法理解如何实现它.

如果有人能给我一些非常感激的指示.

此致,Bryce S.

Answer 1

基本上,JavaScript只有一个用于代码和UI的线程.这意味着,如果您的代码没有放弃控制,那么在您执行之前,UI不会显示.所以,在这种代码中:

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

会发生什么,你将微调器插入DOM,做东西,删除微调器,放弃控制 - 最后更新UI,没有微调器(因为,此时,它不再存在).

基本模式应该是这样的:

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

其工作原理如下:将微调器插入DOM,安排一些事情,放弃控制.UI得到更新(使用微调器).计划的函数运行:东西完成,微调器从DOM中删除,控件再次放弃.UI已更新(没有微调器).

当您在调试器中时,调试器会从代码的手指中删除控件,因此您可以在代码处于中断状态时在UI中看到您的微调器.