如何在 JavaScript 中异步迭代大型数组以保持 UI 响应能力？

异步迭代数组以保持 UI 响应能力

处理大型数组时，在循环中操作它们可能会冻结 UI，阻碍用户交互并恶化用户体验。为了避免这个问题，可以采用以下几种技术：

没有 WebWorkers

在代码需要与 DOM 交互的场景中，使用 WebWorkers 是不可行的。相反，请考虑将循环分成更小的块，并使用 setTimeout() 等计时器按顺序执行它们。这允许浏览器引擎处理其间的其他事件，从而防止 UI 锁定。

这是使用此技术的函数示例：

<code class="javascript">function processLargeArray(array) {
  // Set the chunk size to determine how many items to process at once.
  var chunk = 100;
  var index = 0;

  function doChunk() {
    var cnt = chunk;
    while (cnt-- &amp;&amp; index < array.length) {
      // Process array[index] here.
      ++index;
    }
    if (index < array.length) {
      // Set a timeout to continue processing asynchronously.
      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-- &amp;&amp; index < array.length) {
      // Call the callback with args (value, index, array).
      fn.call(context, array[index], index, array);
      ++index;
    }
    if (index < array.length) {
      // Set a timeout for continued async processing.
      setTimeout(doChunk, 1);
    }
  }

  doChunk();
}</code>

使用 WebWorkers

对于不与 DOM 交互的代码，利用 WebWorkers 是一种有效的方法。 WebWorkers 独立于主 UI 线程运行，确保 UI 处理不受影响。但是，请注意，WebWorkers 需要将 JavaScript 代码分离到单独的脚本文件中。

这是使用 WebWorker 的简单示例：

<code class="javascript">// Create a new WebWorker.
var worker = new Worker('worker.js');

// Send data to the worker.
worker.postMessage(array);

// Listen for messages from the worker.
worker.addEventListener('message', function(e) {
  // Process the results returned from the worker.
});</code>

在worker.js 文件中：

<code class="javascript">// Receive data from the main thread.
self.addEventListener('message', function(e) {
  var array = e.data;

  // Process the array in the web worker.

  // Send the results back to the main thread.
  self.postMessage(results);
});</code>

通过采用这些技术，您可以在不影响 UI 响应能力的情况下迭代大型数组，从而确保流畅且交互式的用户体验。

以上是如何在 JavaScript 中异步迭代大型数组以保持 UI 响应能力？的详细内容。更多信息请关注PHP中文网其他相关文章！