jQuery：强制显示修改后的dom [英] jQuery: force display of modified dom

问题描述

我遇到了一个问题，试图让我的页面上有一个'loading spinner'，它正在对表进行排序时运行，特别是对于速度较慢的客户端，因为对页面进行排序可能需要10秒钟。我可以看到使用微调器代码修改DOM，但是它不会显示。我希望在排序发生之前我可以做些什么来强制显示微调器，当然在排序完成时停止它。

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.

我的排序是基于'sorttable.js'我已修改为在表的第一列处理辅助排序（带有名字）。

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

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

我仍然是这个jQuery的新手，而且这个可排序的代码非常复杂。我将重点介绍以下部分，但我可以在'sorttable-找到我的完整修改后的可排序代码（现在）。在'仅测试'的测试html页面上测试-ONLY.js' -sort_and_spin.htm'。

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

这一切看起来都应该有效。
在带有firebug的Firefox中我看到DOM加载了spinner代码，我看到它在浏览器中旋转，并且行到关掉旋转器rem从DOM中获取它。
但是，如果我没有处于调试模式，只运行它，那么没有显示微调器？
（使用IE10调试甚至不显示微调器）。

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

我在各个地方尝试过.show（）但总是被告知不是可用的功能。
看到对 window.setTimeout（function（）{... 的引用，给出了单独的排序过程，但在这种情况下无法理解如何实现。

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.

问候，Bryce S. / p>

Regards, Bryce S.

推荐答案

基本上，JavaScript只有一个代码和用户界面的线程。这意味着，如果你的代码没有放弃控制，那么UI直到你才会显示。所以，在这种代码中：

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

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

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

这样做如下：将微调器插入DOM，安排一些事情，放弃控制。 UI得到更新（使用微调器）。计划的函数运行：东西完成，微调器从DOM中删除，控件再次放弃。 UI更新（没有微调器）。

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

当你在调试器中时，调试器会从代码的手指中取消控制，这样你就可以在UI中看到你的微调器当你的代码处于中断状态时。

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.

这篇关于jQuery：强制显示修改后的dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！