如何在 JS 中使用 setTimeout 在不中斷線程的情況下處理大數組？

Question

有一個 +10000 個鏈接元素的數組。 每次迭代，都會搜索元素是否與引用匹配，如果匹配則刪除。 結果，出現了大約 400 萬次迭代和飾帶。

我試圖將數組拆分為子數組並每 200 毫秒處理一次，但所有元素都開始被刪除。 如何在不中斷線程的情況下將數組的執行拆分為多個部分？

let slicedarray = sliceIntoChunks(listDeletes, 30); // splitting an array

for (let i = 0; i < slicedarray.length; i++) {
  setTimeout(function() {
      for (let j = 0; j < slicedarray[i].length; j++) {
          document.querySelectorAll(`.pcVideoListItem a[href^="${urlSiteCrop(listDeletes[i][j])}"`).forEach(e => e.closest('li').remove());
      }
  }, 200);
}

PS 如果您將 setTimeout 放在內部循環上，它會起作用，但是 1 毫秒太多了，最后由於頁面的變化，一切都開始閃爍。

for (let i = 0; i < listDeletes.length; i++) {
  setTimeout(function () {
    document.querySelectorAll(`.pcVideoListItem a[href^="${urlSiteCrop(listDeletes[i][j])}"`).forEach(e => e.closest('li').remove());
  }, 1);
}

Answer 1

根據該文檔，“ setTimeout()方法會在幾毫秒后調用一個函數。” 您寧願尋找異步函數或Promise 。 一般來說，嘗試：

var deleteUrls = async function(listDeletes)
  for (let i = 0; i < listDeletes.length; i++) {
    // process listDelegates
  }
deleteUrls(listDeletes);