5

大きなテーブルで多くのクライアント側の処理を行う javascript/jquery コード (内部 Web サイト用) があります。動作は少し遅いですが、問題ありません。

問題は、必要なループを実行している間にブラウザーがフリーズすることです。これには、望ましくない 2 つの影響があります。

  1. 処理スピナー (アニメーション gif ですが、spin.js も試しましたが、同じ問題があります) がフリーズします。
  2. テーブルに十分な行がある場合、ループに時間がかかり、ブラウザーは応答しないスクリプトを報告します

(たとえば) 100 回の反復ごとに一時停止してスピナーを回転させ、スクリプトがまだ処理中であることをブラウザーに知らせるような、コードにある種の「呼吸」ステートメントを含める方法はありますか? (疑似コード) のようなもの:

for (i=0;i<20000;i++)
{
    fnProcessRow();
    if (i % 100 == 0) breath();
}
4

3 に答える 3

1

JavaScript を分割する 1 つの方法は、処理をチャンクに分割し、setTimeout() を使用して次の「チャンク」を実行することです。

私の言いたいことを示すコードが必要な場合はお知らせください。

于 2013-03-05T21:06:43.133 に答える
1

コードに非常に明確に依存するため、これを行うための設定された方法はありません。次のようなものが機能します。

fnProcessRows(0, 10000);

function fnProcessRows(start, end) {
    /* do row processing */

    if (end < totalRows) {
        setTimeout(function () {
            fnProcessRows(start + 10000, end + 10000);
        }, 1000);
    }
});

これにより、1 秒の休憩を挟んで 10000 行が処理されます。これには、「処理済み」行を「未処理」行とともに表示するなど、望ましくない奇妙な副作用が生じる可能性があります。そうでない場合、これは非常に簡単な解決策であるはずです。

もちろん、まだ応答がない場合は、10000 を別の値に減らすことができます。ユーザーが気付くのに苦労する非常に短い時間だけ応答しないようにする必要があります。

于 2013-03-05T21:07:08.920 に答える
0

この質問を参照してください。

setTimeout/setInterval ルートに行きたくない場合は、以下を追加してみてください。

if (i % 100) { $("selector for your animated image").width(); }

一部の (ほとんどの?) ブラウザーでは、再レイアウトとレンダリングが強制されます。

于 2013-03-05T21:12:14.913 に答える