遍历数组而不阻塞UI的最佳方法

70

我需要遍历一些大型数组并将它们存储在API调用的主干集合中。在不导致循环导致接口无响应的情况下执行此操作的最佳方法是什么？

由于返回的数据太大，ajax请求的返回也会阻塞。我认为我可以将其拆分并使用setTimeout使其在较小的块中异步运行，但是有一种更简单的方法来执行此操作。

我认为网络工作者会很好，但需要更改一些保存在UI线程上的数据结构。我尝试使用它来进行ajax调用，但是当它将数据返回到UI线程时，仍然有一段时间接口不响应。

提前致谢

javascript  ajax  arrays  backbone.js  settimeout 
— 乔治菲利普斯
source
我最终使用了@ jfriend00提出的示例，并进行了一些更改，以合并不同的键值，并且由于操作更为昂贵，从而减小了块大小
— georgephillips 2012年

Answers:

107

您可以选择是否使用webWorkers：

没有WebWorkers

对于需要与DOM或应用程序中的许多其他状态进行交互的代码，您不能使用webWorker，因此通常的解决方案是将工作分解为多个块，并在计时器上完成每个块的工作。计时器之间的块之间的中断使浏览器引擎可以处理其他正在进行的事件，不仅可以处理用户输入，还可以绘制屏幕。

通常，您可以负担每个计时器处理多个计时器的效率，并且比每个计时器仅处理一个计时器效率更高，速度更快。此代码使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中的事件处理时，可能会出现这种情况。

— jfriend00
source
添加了更通用的版本，该版本可通过.forEach()样式回调工作，因此相同的实用程序功能可用于许多目的。
— jfriend00 2014年
1
添加了另一个通用版本，该版本按时间而不是数量进行分块，因此它将根据迭代所花费的时间来调整自己的分块大小（保持浏览器响应）。
— jfriend00 2014年
这将如何应用于for..in对象枚举？创建一个数组，然后上面？（或者最好问一个新问题？）
— serv-inc
2
@user-是的，您必须首先创建数组（可以Object.keys()用来创建数组），因为您不能直接使用来迭代这种方式for/in。
— jfriend00
1
我认为使用window.requestAnimationFrame()代替asetTimeout()会更好。这样，您绝对可以确保代码不会被阻塞，因为浏览器本身告诉您进行某些处理很酷。
— dodov
5

这是执行此“异步”循环的演示。它会“延迟”迭代1毫秒，并在该延迟范围内，它为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

还有一些替代方案，例如网络工作者和当前建议的setImmediate，其afaik在IE上带有前缀。

— 约瑟夫
source
不如以前的答案，因为它在每个元素之后调用setTimeout 。
— Andrey M.
1ms的延迟不是UI更新的原因。该setTimeout函数会将函数排队在回调队列中，该回调队列将在UI有机会执行其操作后获取。您也可以轻松地传递0秒的延迟。
— 克里斯，
0

建立在@ 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();
    }
}
— Cjbarth
source
而不是将所有内容都放进if我的if (...) return; ...
— 书中
0

非常感谢。

我已经更新了代码以添加一些功能。

通过下面的代码，您可以将函数用于数组（以迭代数组）或将函数用于地图（以迭代地图）。

此外，现在有一个参数，用于在块完成时调用（在需要更新加载消息时会有所帮助），以及在处理循环结束时调用的函数的参数（执行下一个循环所必需）异步操作完成后执行的步骤）

//Iterate Array Asynchronously
//fn = the function to call while iterating over the array (for loop function call)
//chunkEndFn (optional, use undefined if not using) = the function to call when the chunk ends, used to update a loading message
//endFn (optional, use undefined if not using) = called at the end of the async execution
//last two args are optional
function iterateArrayAsync(array, fn, chunkEndFn, endFn, 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((now() - startTime) > maxTimePerChunk && chunkEndFn !== undefined){
            //callback called with args (index, length)
            chunkEndFn.call(context,index,array.length);
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
        else if(endFn !== undefined){
            endFn.call(context);
        }
    }    
    doChunk();    
}

//Usage
iterateArrayAsync(ourArray,function(value, index, array){
    //runs each iteration of the loop
},
function(index,length){
    //runs after every chunk completes, this is optional, use undefined if not using this
},
function(){
    //runs after completing the loop, this is optional, use undefined if not using this

});

//Iterate Map Asynchronously
//fn = the function to call while iterating over the map (for loop function call)
//chunkEndFn (optional, use undefined if not using) = the function to call when the chunk ends, used to update a loading message
//endFn (optional, use undefined if not using) = called at the end of the async execution
//last two args are optional
function iterateMapAsync(map, fn, chunkEndFn, endFn, maxTimePerChunk, context) {
    var array = Array.from(map.keys());
    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, key, map)
            fn.call(context,map.get(array[index]), array[index], map);
            ++index;
        }
        if((now() - startTime) > maxTimePerChunk && chunkEndFn !== undefined){
            //callback called with args (index, length)
            chunkEndFn.call(context,index,array.length);
        }
        if (index < array.length) {
            // set Timeout for async iteration
            setTimeout(doChunk, 1);
        }
        else if(endFn !== undefined){
            endFn.call(context);
        }
    }    
    doChunk();
}

//Usage
iterateMapAsync(ourMap,function(value, key, map){
    //runs each iteration of the loop
},
function(index,length){
    //runs after every chunk completes, this is optional, use undefined if not using this
},
function(){
    //runs after completing the loop, this is optional, use undefined if not using this

});
— owl
source
async我猜调用此函数会产生误导。这些操作仍在同一线程上同步。
— canbax
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.