web-dev-qa-db-ja.com

UIをブロックせずに配列を反復処理する最良の方法

いくつかの大きな配列を反復処理し、API呼び出しからバックボーンコレクションに格納する必要があります。ループが原因でインターフェイスが応答しなくなることなくこれを行う最良の方法は何ですか？

返されるデータが非常に大きいため、ajax要求の戻りもブロックされます。私はそれを分割し、setTimeoutを使用して小さなチャンクで非同期的に実行できると考えていますが、これを行う簡単な方法があります。

Webワーカーは良いと思いましたが、UIスレッドに保存されたいくつかのデータ構造を変更する必要があります。これを使用してajax呼び出しを実行しようとしましたが、データがUIスレッドに返されると、インターフェイスが応答しなくなる場合があります。

前もって感謝します

javascriptajaxarraysbackbone.jssettimeout
57
georgephillips

WebWorkersの有無を選択できます。

WebWorkersなし

DOMまたはアプリの他の多くの状態とやり取りする必要があるコードの場合、webWorkerを使用できないため、通常の解決策は、タイマーで作業の各チャンクを行うチャンクに作業を分割することです。タイマーによるチャンク間の区切りにより、ブラウザーエンジンは進行中の他のイベントを処理でき、ユーザー入力の処理だけでなく、画面の描画も可能になります。

通常、各タイマーで複数の処理を行う余裕があり、タイマーごとに1つだけを実行するよりも効率的で高速です。このコードは、UIスレッドに、各チャンク間で保留中のUIイベントを処理する機会を与え、UIをアクティブに保ちます。

_function processLargeArray(array) {
    // set this to whatever number of items you can process at once
    var chunk = 100;
    var index = 0;
    function doChunk() {
        var cnt = chunk;
        while (cnt-- && index < array.length) {
            // process array[index] here
            ++index;
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArray(veryLargeArray);
_

これは概念の実用的な例です-この同じ関数ではなく、同じsetTimeout()アイデアを使用して多くの反復で確率シナリオをテストする別の長期実行プロセス： http：/ /jsfiddle.net/jfriend00/9hCVq/

上記を.forEach()のようなコールバック関数を呼び出すより汎用的なバージョンにすると、次のようになります。

_// last two args are optional
function processLargeArrayAsync(array, fn, chunk, context) {
    context = context || window;
    chunk = chunk || 100;
    var index = 0;
    function doChunk() {
        var cnt = chunk;
        while (cnt-- && index < array.length) {
            // callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback, 100);
_

一度にチャンクする数を推測するのではなく、経過時間を各チャンクのガイドにして、所定の時間間隔でできるだけ多く処理することもできます。これにより、反復のCPU使用率に関係なく、ブラウザーの応答性がある程度自動的に保証されます。そのため、チャンクサイズを渡すのではなく、ミリ秒の値を渡すことができます（または単にインテリジェントなデフォルトを使用します）。

_// last two args are optional
function processLargeArrayAsync(array, fn, maxTimePerChunk, context) {
    context = context || window;
    maxTimePerChunk = maxTimePerChunk || 200;
    var index = 0;

    function now() {
        return new Date().getTime();
    }

    function doChunk() {
        var startTime = now();
        while (index < array.length && (now() - startTime) <= maxTimePerChunk) {
            // callback called with args (value, index, array)
            fn.call(context, array[index], index, array);
            ++index;
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
    }    
    doChunk();    
}

processLargeArrayAsync(veryLargeArray, myCallback);
_

WebWorkersを使用

ループ内のコードがDOMにアクセスする必要がない場合、時間のかかるすべてのコードをwebWorkerに入れることができます。 webWorkerはメインブラウザーのJavascriptから独立して実行され、実行が完了するとpostMessageで結果をやり取りできます。

WebWorkerでは、webWorkerで実行されるすべてのコードを個別のスクリプトファイルに分離する必要がありますが、ブラウザー内の他のイベントの処理をブロックする心配もなく、「無応答スクリプト」プロンプトを心配することなく完了するまで実行できますメインスレッドで長時間実行されるプロセスを実行しているときに、UIでイベント処理をブロックせずに発生する可能性があります。

83
jfriend00

ここにデモがあります この「非同期」ループの実行。 1msの反復を「遅延」させ、その遅延内でUIに何かをする機会を与えます。

function asyncLoop(arr, callback) {
    (function loop(i) {

        //do stuff here

        if (i < arr.Length) {                      //the condition
            setTimeout(function() {loop(++i)}, 1); //rerun when condition is true
        } else { 
            callback();                            //callback when the loop ends
        }
    }(0));                                         //start with 0
}

asyncLoop(yourArray, function() {
    //do after loop  
})​;

//anything down here runs while the loop runs

web workers や 現在提案されているsetImmediate のような代替手段がありますが、これはプレフィックスで IEで です。

5
Joseph

@ jfriend00に基づいて、プロトタイプバージョンを以下に示します。

if (Array.prototype.forEachAsync == null) {
    Array.prototype.forEachAsync = function forEachAsync(fn, thisArg, maxTimePerChunk, callback) {
        let that = this;
        let args = Array.from(arguments);

        let lastArg = args.pop();

        if (lastArg instanceof Function) {
            callback = lastArg;
            lastArg = args.pop();
        } else {
            callback = function() {};
        }
        if (Number(lastArg) === lastArg) {
            maxTimePerChunk = lastArg;
            lastArg = args.pop();
        } else {
            maxTimePerChunk = 200;
        }
        if (args.length === 1) {
            thisArg = lastArg;
        } else {
            thisArg = that
        }

        let index = 0;

        function now() {
            return new Date().getTime();
        }

        function doChunk() {
            let startTime = now();
            while (index < that.length && (now() - startTime) <= maxTimePerChunk) {
                // callback called with args (value, index, array)
                fn.call(thisArg, that[index], index, that);
                ++index;
            }
            if (index < that.length) {
                // set Timeout for async iteration
                setTimeout(doChunk, 1);
            } else {
                callback();
            }
        }

        doChunk();
    }
}
0
cjbarth