如何在不阻塞 UI 线程的情况下迭代大型数组？

非阻塞数组迭代策略

迭代大型数组时，避免阻塞 UI 线程并影响用户体验至关重要。本文探讨了不使用 Web Workers 和使用 Web Workers 实现非阻塞迭代的各种策略。

不使用 Web Workers

对于需要交互的代码对于 DOM，一个常见的解决方案是将迭代分成更小的块并使用计时器异步处理它们。这允许浏览器处理其他事件，保持 UI 响应。

<code class="javascript">function processLargeArray(array) {
  // Chunk size for processing
  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>

或者，您可以定义一个更通用的函数，它接受处理每个元素的回调函数：

<code class="javascript">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) {
      // Call the callback 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>

为了避免猜测最佳块大小，您可以使用基于间隔的方法：

<code class="javascript">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) {
      // Call the callback 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 Workers

Web Workers 在迭代时提供另一种解决方案代码不需要 DOM 访问。耗时的代码被移至单独的脚本文件并在工作线程中运行。完成后，工作人员可以将结果发布回主线程，而不会妨碍事件处理。

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