javascript - 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 中删除。 但是，如果我没有处于 Debug模式，只是运行它，那么不会显示微调器吗？ (使用 IE10 调试甚至不显示微调器)。

我在不同的地方尝试过 .show() 但总是被告知没有可用的功能。 看到对 window.setTimeout( function () {... 的引用以提供单独的排序过程，但无法理解在这种情况下如何实现它。

如果有人能给我一些建议，我将不胜感激。

问候，布莱斯 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 中看到您的微调器。