Javascript jQuery：强制显示修改过的dom

我在尝试在我的页面上安装“加载微调器”时遇到了一个问题，该微调器在对表进行排序时运行，特别是对于速度较慢的客户端，因为排序页面可能需要10秒钟。我可以看到DOM被微调器代码修改，但是它没有显示。我希望可以在排序之前强制显示微调器，当然，在排序完成后停止

我的排序基于此，我已修改为在表的第一列（其中包含名称）上处理二级排序

我的纺纱机使用

我对jQuery还是个新手，这段可排序的代码相当复杂。我突出显示了下面的部分，但是我的完整修改的可排序代码（目前）可以在中找到，在中有一个测试html页面

所以，脚本在页面加载时设置一些函数（“……”表示跳过行）：

makeSortable:function（table）{//第75行
......
headlow=table.tHead.rows[0]。单元格；
对于（变量i=0；i 0）{
变量选项={
.......
};
data.spinner=新微调器（$.extend（{color:$this.css（'color'）}，opts））.spin（this）；
//可以看到添加到DOM的微调器，但不显示。。。
}
}})（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

headlow[i].sorttable\u columnindex=i//第171行
净空高度[i].可排序体=table.tBodies[0]；
dean_addEvent（净空[i]，“点击”，函数（e）{//第176行
…做一些关于类名的事情，等等
this.sorttable_微调器（1）；//在//第224行设置微调器
..构建数组进行排序，然后调用排序函数
if（sort_direction=='forward'）{//第247行
row\u array.sort（this.sorttable\u sort函数）；
}否则{
row_array.sort（此.sorttable_reversesort函数）；
}
tb=这个可排序的实体；
对于（var j=0；j基本上，JavaScript只有一个线程用于您的代码和UI。这意味着，如果您的代码没有放弃控制，UI在您放弃控制之前不会显示。因此，在这种代码中：

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

发生的事情是，您将微调器插入DOM，执行一些操作，删除微调器，放弃控制，最终UI被更新，没有微调器（因为此时它已经不存在了）

基本模式应为：

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

其工作原理如下：将微调器插入DOM，安排某些内容，放弃控制。UI得到更新（使用微调器）。计划函数运行：完成任务，从DOM中删除微调器，再次放弃控制。UI得到更新（不使用微调器）

当您在调试器中时，调试器会从代码的手指上撕下控件，这样您就可以在代码中断时在UI中看到微调器。
顺便说一句-由于假期超出internet范围，5天内无法查看答案：-）我想我应该在这里留下一张便条来查看我的。我试图在JSFIDLE上为您制作一个演示，但它无法处理3800多个表行，但在我的桌面上，我发现排序大约需要3秒钟。如果您不使用zebra小部件并使用css应用行着色（
tbody tr:nth child（odd）
）.嗨，莫蒂，谢谢你的链接-我希望几周前我就发现了。我的谷歌让我失望。我会继续我现在拥有的。干杯，布莱斯。嗨，阿玛丹，太好了，我现在可以看到微调器了。在我启动微调器后，在上面的dean_addEvent函数中添加了setTimeout（）（第224行）将这段代码的其余部分作为setTimeout调用的一部分。但是，我看到了我的微调器，但它没有旋转-它在第一次显示时是静态的。我可以做些什么来解决这个问题吗？比如，我可以设置一些东西在代码和UI之间交换，以便屏幕刷新。或者以某种方式运行两个线程……正如我所说的，JavaScript只在一个线程。（实际上，你可以通过WebWorkers获得更多线程，但它们不能接触UI，所以你不能使用它们。）让代码允许屏幕刷新的唯一方法是更频繁地插入
setTimeout
——例如，摆脱循环，让代码用
setTimeout
调用自己。谢谢。我只需要看到弹出一条消息，说“排序…”相反，作为我主要的耗时“循环”，我认为我无法访问，因为它是内置“排序”功能的一部分。干杯，布莱斯。你有多少行？你的
sort
与
appendRow
循环比较，你的
sort
是否计时？但是，静态消息可能是个好主意。
spinner_on();
setTimeout(function() {
  dostuff();
  spinner_off();
}, 0);