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