如何在 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-- && index <p>您也可以建立一個通用版本呼叫回調函數：</p>
<pre class="brush:php;toolbar:false"><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 <h3 id="使用WebWorkers">使用WebWorkers</h3>
<p>對於不與DOM 互動的程式碼，利用WebWorkers 是一種有效的方法。 WebWorkers 獨立於主 UI 執行緒運行，確保 UI 處理不受影響。但是，請注意，WebWorkers 需要將 JavaScript 程式碼分離到單獨的腳本檔案中。 </p>
<p>這是使用WebWorker 的簡單範例：</p>
<pre class="brush:php;toolbar:false"><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中文網其他相關文章！