如何在 JavaScript 中迭代大型数组而不阻塞 UI？

在不阻塞 UI 的情况下异步迭代大型数组

简介

在 JavaScript 中迭代大型数组可能具有挑战性，尤其是当 UI 需要保持响应时。阻止 UI 可能会导致糟糕的用户体验。本文探讨了在不中断 UI 的情况下迭代大型数组的不同方法。

没有 Web Workers

当使用需要访问 DOM 或与大量交互的代码时其他应用程序状态下，无法使用Web Workers。一个实用的解决方案是将迭代分成更小的块并在计时器上执行它们。这允许浏览器处理块之间的其他事件，保持 UI 响应能力。

以下代码演示了这种方法：

<code class="js">function processLargeArray(array) {
  // Customizable chunk size
  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();
}</code>

此代码可以进一步推广以调用类似于以下的回调函数Array.forEach() 可自定义块大小：

<code class="js">function processLargeArrayAsync(array, fn, chunk, context) {
  // Customizable chunk size
  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();
}</code>

使用 Web Worker

如果代码不需要访问 DOM，则可以使用 Web Worker被利用。 Web Worker 独立于主线程运行，允许其异步执行长时间运行的任务。

首先，需要将在 Web Worker 中运行的代码隔离在单独的脚本中。然后，可以执行以下步骤：

1. 创建一个新的 Web Worker 对象并指定脚本的 URL：

   <code class="js">var webWorker = new Worker('worker.js');</code>

2. 当 Web Worker 完成其任务时，处理从 Web Worker 收到的消息事件：

   <code class="js">webWorker.onmessage = function(e) {
     // Handle the result
   };</code>

3. 将数据发送到 Web Worker 进行处理：

   <code class="js">webWorker.postMessage({ data: array });</code>

以上是如何在 JavaScript 中迭代大型数组而不阻塞 UI？的详细内容。更多信息请关注PHP中文网其他相关文章！