9

テーブルのソート中に実行される「読み込みスピナー」をページに表示しようとすると問題が発生しました。特に低速のクライアントでは、ページのソートに最大 10 秒かかる場合があります。DOM がスピナー コードで変更されていることがわかりますが、表示されません。並べ替えが発生する前にこのスピナーの表示を強制し、並べ替えが完了したらもちろん停止するために何かできることを期待していました。

私のソートは「sorttable.js」に基づいており、テーブルの最初の列（名前が含まれている）で2番目のソートを処理するように変更しました。

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

私はまだこの jQuery の初心者であり、このソート可能なコードはかなり複雑です。以下の部分をハイライトしますが、完全に変更されたソートテーブル コード (今のところ) は'testing -ONLY-sort_and_spin.htm' の テスト html ページと共に'sorttable-TESTING-ONLY.js'にあります。

したがって、スクリプトはページの読み込み時にいくつかの機能を設定します (「.....」は行がスキップされることを意味します)。

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 から削除されます。しかし、デバッグモードでなく、実行しているだけの場合、スピナーは表示されませんか? (IE10 でデバッグしても、スピナーは表示されません)。

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

誰かが私にいくつかの指針を与えることができれば、それは大歓迎です。

よろしく、 ブライス S.

4

1 に答える 1

8

基本的に、JavaScriptには、コードとUIを一緒に使用するためのスレッドが1つだけあります。つまり、コードが制御を放棄しない場合、UIは放棄するまで表示されません。したがって、この種のコードでは：

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

何が起こるかというと、スピナーをDOMに挿入し、処理を行い、スピナーを削除し、コントロールを放棄します。UIは、スピナーなしでようやく更新されます（現時点では、スピナーはもう存在しないため）。

基本的なパターンは次のようになります。

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

これは次のように機能します。スピナーをDOMに挿入し、何かをスケジュールし、制御を放棄します。UIが更新されます（スピナーを使用）。スケジュールされた関数の実行：処理が完了し、スピナーがDOMから削除され、制御が再び放棄されます。UIが更新されます（スピナーなし）。

デバッガーを使用している場合、デバッガーはコードの指からコントロールをリッピングするため、コードが休止している間、UIでスピナーを確認できます。

于 2013-01-09T02:58:39.933 に答える