8

約 500 行のテーブルを作成していますが、ブラウザーがレンダリングするのに数秒かかりますが、フリーズしているように見えます。これが、ユーザーの忍耐を求めるメッセージを表示したい理由です。

$.ajax({
  url: '{{ search_url }}',
  success: function (response) {
    $('#progress').text('Rendering results, please wait...');
    clear_table();
    populate_table(response);
  }
});

メッセージは表示されません - どうやらブラウザ (Chrome 23 でテスト済み) はすべての DOM 変更をバッファリングし、一度にすべてをレンダリングします。

回避策として、実行がイベントループに戻るまでテーブルへの入力を遅らせると、実際にメッセージが表示されることがわかりました。

$.ajax({
  url: '{{ search_url }}',
  success: function (response) {
    $('#progress').text('Rendering results, please wait...');
    window.setTimeout(function () {
      clear_table();
      populate_table(response);
    }, 0);
  }
});

この方法は常に機能するのでしょうか、それともこの場合のより良い手法があるのでしょうか。

4

1 に答える 1

3

これは、Javascript の実行がシングル スレッドであるためです。したがって、すべての JS コードが実行されるまで、ブラウザーは何もしません。つまり、フリーズします。これを防ぐには、jQuery Async プラグイン(ほんの数行のコード) を使用することをお勧めします。このプラグインは、( を使用してsetTimeout) 定期的にブラウザーに制御を戻します。これにより、ブラウザがフリーズするのを防ぎ、問題なく待機メッセージが表示されます。

于 2012-11-24T00:14:12.470 に答える