jQuery：変更されたDOMの表示を強制する

Question

テーブルがソートされている間に実行されるページに「ローディングスピナー」を挿入しようとすると問題が発生しました。特に遅いクライアントの場合は10秒ページをソートします。私は、DOMがスピナーコードで修正されているのがわかりますが、表示されません。私はソートが起こる前にこのスピナーの表示を強制するために私ができることがあるかもしれないことを望んでいました、そして、ソートが完了したらそれを止めてください。

私の並べ替えは、テーブルの最初の列（名前が入っている）のセカンダリソートを処理するように変更した'sorttable.js'に基づいています。

私のスピナーは'spin.js'を使用します。

私はまだこのjQueryに関する初心者ですが、このソート可能なコードはむしろ関与しています。私は下の部分を強調していますが、修正された完全なソート可能なコード（今のところ）は'sorttable-TESTING-ONLY.js'にあり、テストhtmlページは'TESTING-ONLY-sort_and_spin.htm'です。

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 

：彼らは、列ヘッダのクリック可能なイベントハンドラを作成します

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

コード：

だから、スクリプトは、ページが読み込まれる（「.....」スキップラインを意味する）いくつかの機能を設定します

これはすべて動作するはずです。 Firebugを搭載したFirefoxでは、Spinnerコードがロードされ、ブラウザで回転していることがわかり、スピンナーをオフにする行がDOMから削除されます。 しかし、デバッグモードではなく、実行しているだけでスピナーは表示されませんか？ （IE10でのデバッグではスピナーが表示されません）。

私はさまざまな場所で.show（）を試しましたが、利用可能な関数ではないと常に言われました。 ソートのための別個のプロセスを提供するためにwindow.setTimeout(function() {...への参照を見ましたが、この状況でそれを実装する方法を理解できませんでした。

もし誰かが私に大きな感謝の言葉を与えることができたら。

よろしく、ブライスS.

Answer 1

は基本的には、JavaScriptが唯一一緒にあなたのコードやUIのための1つのスレッドがあります。つまり、コードがコントロールを放棄しなければ、UIは表示されるまで表示されません。だから、このコードの一種で：

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

される何が起こる、あなたはDOMにスピナーを挿入し、ものを行う、スピナーを削除し、制御を放棄 - とUIはありませんスピンナーで、最後に更新された（この時点で、なぜならそれはもはや存在しません）。

基本的なパターンは、このようになります。コントロールを放棄、DOM、スケジュール何かにスピナーを挿入します。

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

これは、次のように動作します。 UIが更新されます（スピナー付き）。スケジュールされた機能の実行：処理が完了し、スピナーがDOMから削除され、コントロールが再び放棄されます。 UIが更新されます（スピナーなし）。

デバッガを使用しているときに、デバッガがコードの指からコントロールをリッピングするので、コードが停止している間にUIでスピンナを見ることができます。