All 10 Event Loop & Concurrency questions
More in Event Loop & Concurrency
What is the difference between the microtask queue and the macrotask (task) queue? How does the event loop decide what to run next? Why does a long synchronous function block UI updates and event handling? Why does Promise.resolve().then(cb) run before setTimeout(cb, 0), even with a 0ms delay? What is 'starvation' of the macrotask queue, and how can recursive microtasks cause it? How does async/await map onto the microtask queue under the hood? What's the relationship between requestAnimationFrame and the event loop's rendering step?
Advertisement
Back to results for “Event Loop & Concurrency”
JavaScript › Event Loop & Concurrency

How would you break a large synchronous task into chunks to keep the UI responsive?

Advanced

Answer

Split the work into smaller batches and yield control back to the event loop between them using setTimeout(fn, 0) or requestIdleCallback(), allowing pending UI updates and user input to be processed between chunks.
function processInChunks(items, chunkSize, fn) {
  let i = 0;
  function next() {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(fn);
    i += chunkSize;
    if (i < items.length) setTimeout(next, 0);
  }
  next();
}
Real-world example Processing 100,000 rows of imported CSV data client-side without freezing the browser tab.

Common follow-ups: How does requestIdleCallback differ from setTimeout for this purpose?

Performance Optimization: Debouncing Throttling & Memoization
All 10 Event Loop & Concurrency questions