Sobes.tech
Middle

Миллионго чукул элементтерден турган массив келет, ар бир элементти 100 миллисекундта иштетүү керек. Сервер менен өз ара аракетти өзгөртүүгө болбойт. Бул массивди кандай иштетсе болот, UI блоктолоорун алдын алат?

sobes.tech AI

AIден жооп

Чтобы обработать большой массив с длительной обработкой каждого элемента и не блокировать UI, нужно разбить работу на небольшие части и выполнять их асинхронно, позволяя браузеру обновлять интерфейс между партиями.

Пример подхода с использованием setTimeout или requestIdleCallback:

function processChunk(array, start, chunkSize) {
  const end = Math.min(start + chunkSize, array.length);
  for (let i = start; i < end; i++) {
    // Обработка элемента, занимает ~100ms
    processElement(array[i]);
  }
  if (end < array.length) {
    setTimeout(() => processChunk(array, end, chunkSize), 0);
  }
}

processChunk(largeArray, 0, 10); // обрабатываем по 10 элементов за раз

Так UI не будет заморожен, так как между партиями даётся время на отрисовку и обработку событий.

Если доступен Web Worker, можно вынести обработку туда, чтобы не блокировать главный поток.