High-frequency DOM events like keyboard keystrokes, window resizing, viewport scrolling, and continuous mouse movement often overwhelm performance by firing far more frequently than necessary, causing UI jank, delayed updates, or excessive network requests.

Debouncing

Debouncing delays function execution until a specified quiet period has passed since the last event trigger. If another event fires during that quiet window, the timer resets entirely. This is ideal for scenarios like search input validation, where you want to avoid sending API calls for every single character typed.

function debounce(callback, waitMs = 1200) {
  let pendingTimer;
  return function(...args) {
    if (pendingTimer) clearTimeout(pendingTimer);
    const executionContext = this;
    pendingTimer = setTimeout(function() {
      callback.apply(executionContext, args);
    }, waitMs);
  };
}

const citySearchField = document.getElementById('citySearch');
citySearchField.addEventListener('input', debounce(function(e) {
  console.log('Sending city search query:', e.target.value);
  console.log('Bound DOM element:', this);
}, 900));

Throttling

Throttling ensures a function can execute at most once per specified time interval. A leading-edge implementation runs the function immediately on the first trigger, then blocks subsequent calls until the cooldown period ends. This works well for infinite scroll product feeds, where you want to fetch new items consistently as the user scrolls without waiting for them to stop.

function throttle(callback, cooldownMs = 1000) {
  let isReady = true;
  return function(...args) {
    if (!isReady) return;
    callback.apply(this, args);
    isReady = false;
    setTimeout(() => { isReady = true; }, cooldownMs);
  };
}

Third-Party Library Implementation

Lodash provides robust, production-ready debounce and throttle utilities with optional features like trailing/leading edge toggles, cancellation, and max wait bounds.

Simulated User Input Testing

let simulatedInput = 0;
const inputSimulator = setInterval(() => {
  simulatedInput++;
  runTest(simulatedInput);
  if (simulatedInput === 12) clearInterval(inputSimulator);
}, 280);

Testing Lodash Debounce

const runTest = _.debounce(function(val) {
  console.log('Debounced output:', val);
}, 1100);

Sample output:

12

Testing Lodash Throttle

const runTest = _.throttle(function(val) {
  console.log('Throttled output:', val);
}, 1100);

Sample output:

1
5
9
12