JavaScriptのソート中にアニメーションをロードする

Question

アルファベット順にソートされているデータテーブルがあり、かなり大きなテーブルです。ソートには2〜3秒かかります。問題は、そのスクリプトがページをロックするデータをソートしている間です。だから私は、その時間の間に読み込みアニメーションを表示したい（またはテキストをロードするだけです）。今、私のロード中のgifは、スクリプトが終了した後にのみ表示されます - 私にもかかわらず、setIntervalまたはsetTimeoutを使用しています。私が紛失しているものがなければならない。 スクリプトを実行する前に、テキストまたは画像の読み込みを表示するにはどうすればよいですか？コードは以下の通りです：

$("#rotateArrowA").click(function() { 

     $(function() { 
       $("#loadingTwo").css("display","block"); 
       $("#rotateArrowA").css("display","none"); 
       $("#rotateArrowDownA").css("display","block"); 
       setInterval(timeOut(), 1000); 
     }); 

    function timeOut() { 

      var rows = $("#tableTwo tbody tr").get(); 

      rows.sort(function(a, b) { 

       var A = $(a).children("td").eq(1).text().toUpperCase(); 
       var B = $(b).children("td").eq(1).text().toUpperCase(); 

       if(A > B) { 
       return -1; 
       } 

       if(A < B) { 
       return 1; 
       } 

       return 0;  

      }); 

      $.each(rows, function(index, row) { 

       $("#tableTwo").children("tbody").replaceWith(rows); 
        $("#tableTwo tbody tr:odd").css("background-color", "#E6E6E6"); 
      $("#tableTwo tbody tr:even").css("background-color", "white"); 

      }); 

    } 


    }); 

また、私は、これはレガシークライアント（IE 7-8）のために働くことがある...マルチスレッドのために任意のHTML 5つの機能を使用することはできません。

Answer 1

変更この：これに（ "timeOut()を呼び出し、その後、最初の引数としてtimeOut()の戻り値を使用してsetInterval(...)を呼び出す" を意味する）

setInterval(timeOut(), 1000); 

：

setTimeout(timeOut, 1000); 

（これ「timeOutを最初の引数として渡す」という意味の「setTimeout(...)を呼び出す」を意味します）。

Answer 2

私はバッチで作業することをお勧めします。これにより、すべての作業を完了できますが、ページをフリーズすることはできません。

これを行うためのパターンがあります。

this page、およびyeildingEach関数を参照してください。

この場合、絶対配置されたDIVのアニメーションイメージを「読み込み中...」と重ねることになります。 .show()ソートを開始する前にdivを指定し、完了後にdivを.hide()にします。

Answer 3

並べ替えがブラウザを数秒間ロックする十分なデータを表示している場合は、代わりに仮想スクロールテーブルを使用することを検討する必要があります。私のお気に入りはSlickGridです。

巨大なテーブルをレンダリングするだけでなく、より軽量のメモリ内のJSオブジェクトにデータセットを格納します。 （結果的に、現在使用しているDOMベースの並べ替えよりも速く並べ替えることができます）。SlickGridは、表示しているテーブルの部分のDOM要素をレンダリングするだけなので、ブラウザに負担がかかりません。

データセットのload small chunks（バックエンドは単純なページングとして実装されています）を選択することで、一定のパフォーマンスでブラウザに効果的に無限の行を表示することができます。