如何在不阻塞 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中文網其他相關文章！