Как обработать большой массив без прерывания потока в JS, используя setTimeout?

Question

Есть массив на +10000 элементов ссылок. Каждую итерацию ищется совпадает ли элемент по ссылке и удаляется, если да. В итоге выходит около 4 млн итераций и фризы.

Я пытался разбить массив на подмассивы и обрабатывать их через каждые 200 миллисекунд, но стали удалятся все элементы. Как можно разбить выполнения массива на части без прерывания потока?

let slicedarray = sliceIntoChunks(listDeletes, 30); // разбитие массива

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);
}

P.S Работает, если поставить 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

Спасибо @vsemozhebuty за подсказку. Функция была изначально некорректна. Эта работает гораздо быстрее, что асинхронность не понадобилась.

  function delBoxes() {
    let alllinks = document.querySelectorAll(`.pcVideoListItem .usernameWrap a`);
    let linksinclude = [];

    for (let i = 0; i < alllinks.length; i++) {
      if(listDeletes.includes(alllinks[i].href)){
        linksinclude.push(alllinks[i]);
      }
    }
     linksinclude.forEach(e=>e.closest("li").remove());
  }

БЛОГ НА HUSL

Как обработать большой массив без прерывания потока в JS, используя setTimeout?

Ответы (1 шт):