javascript - 在不阻塞 UI 的情况下迭代数组的最佳方法

Question

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

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

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

提前致谢

Answer 1

您可以选择使用或不使用 webWorkers:

没有网络 worker

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

通常，您可以负担得起在每个计时器上处理多个任务，这比每个计时器只处理一个任务更高效、更快速。此代码使 UI 线程有机会处理每个 block 之间的任何未决 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);

---

与其猜测一次分 block 的数量，还可以让耗时成为每个分 block 的指南，并让它在给定的时间间隔内处理尽可能多的分 block 。无论迭代的 CPU 密集程度如何，这都会自动保证浏览器的响应能力。因此，您可以传入一个毫秒值(或仅使用智能默认值)，而不是传入 block 大小:

// 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);

使用网络 worker

如果你循环中的代码不需要访问DOM，那么可以把所有耗时的代码都放到一个webWorker中。 webWorker 将独立于主浏览器 Javascript 运行，然后在完成后，它可以通过 postMessage 返回任何结果。

一个 webWorker 需要将所有将在 webWorker 中运行的代码分离到一个单独的脚本文件中，但是它可以运行完成而不用担心阻塞浏览器中其他事件的处理，也不用担心“无响应”在主线程上执行长时间运行的进程时可能会出现“脚本”提示，并且不会阻止 UI 中的事件处理。