Debouncing: Merge Rapid Calls into One

Debouncing delays the execution of a function until a specified period of inactivity has passed. If the event fires again before the delay expires, the timer resets. This is ideal for scenarios like search-as-you-type where you only want to query the server after the user stops typing.

Typical Use-Cases

• Auto-complete search boxes
• Auto-saving drafts in a text editor

Vanilla JavaScript Implementation

const searchInput = document.querySelector('#search');
let debounceTimer;

searchInput.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    fetch(`/api/search?q=${encodeURIComponent(searchInput.value)}`)
      .then(res => res.json())
      .then(renderResults);
  }, 400);
});

Using a Utility Library

import { debounce } from 'lodash-es';

const autoSave = debounce(content => {
  fetch('/api/save', { method: 'POST', body: JSON.stringify({ content }) });
}, 800);

editor.on('change', () => autoSave(editor.getValue()));

Throttling: Limit Execution Frequency

Throttling ensures a function is executed at most once in a given time window, regardless of how many times the event is triggered. This is useful for high-frequency events like scrolling or resizing where you only need periodic updates.

Typical Use-Cases

• Scroll-based animations or lazy-loading images
• Rate-limiting button clicks to prevent double submissions
• Tracking video playback progress

Vanilla JavaScript Implementation

function throttle(callback, interval) {
  let isThrottled = false;
  return function (...args) {
    if (isThrottled) return;
    isThrottled = true;
    callback.apply(this, args);
    setTimeout(() => (isThrottled = false), interval);
  };
}

window.addEventListener('scroll', throttle(() => {
  const scrollTop = window.pageYOffset;
  updateStickyHeader(scrollTop);
}, 100));

Using a Utility Library

import { throttle } from 'lodash-es';

window.addEventListener('resize', throttle(() => {
  recalculateLayout();
}, 250));

Understanding the Event Loop

The event loop is the orchestration mechanism that keeps the browser’s single rendering thread responsive. It continuously checks for pending tasks and executes them in a specific order.

1. The browser’s main thread runs an infinite loop (in Chromium, a for (;;) loop) that repeatedly pulls the next task from various queues.
2. Each task has a type, and tasks of the same type share a queue. Different queues may have different priorities.
3. At least one microtask queue must exist, and its tasks always run before any other queue during a single turn of the loop.
4. After a macrotask completes, the engine drains the microtask queue completely before rendering or fetching the next macrotask.

Why JavaScript Uses Asynchronous Patterns

JavaScript’s runtime is single-threaded, yet the browser must juggle many responsibilities: painting pixels, handling user input, running scripts, and managing network I/O. A synchronous approach would block the main thread, freezing the UI and degrading user experience.

To prevent blocking, the browser delegates time-consuming operations—such as setTimeout, network requests, or DOM events—to background threads (e.g., the network or timer threads). When these operations finish, their callbacks are wrapped as tasks and placed in the appropriate queue. The main thread then picks them up when it’s idle, ensuring the page remains interactive.

console.log('A');

setTimeout(() => console.log('C'), 0);

Promise.resolve().then(() => console.log('B'));

console.log('D');

// Output: A, D, B, C

The snippet above demonstrates how microtasks (Promise callbacks) are executed immediately after the current stack empties, before any macrotask (setTimeout callback) runs.