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