Debouncing

Debouncing delays the execution of a function until after a specified time has passed since the last time it was called. It's used to prevent rapid-fire function calls.

The Problem

// Without debounce - fires on every keystroke
input.addEventListener('input', (e) => {
  fetchSearchResults(e.target.value); // Makes API call for every character!
});

The Solution

// With debounce - waits for pause in typing
const debouncedSearch = debounce((value) => {
  fetchSearchResults(value);
}, 300);

input.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

Analogy

Imagine pressing an elevator button. Every time you press it, the timer resets. The elevator only moves after you stop pressing for a moment.

Keystrokes: h-e-l-l-o-[pause]
                ↓
Debounced:     [wait]-[wait]-[wait]-EXECUTE

Common Use Cases

• Search input (wait for user to stop typing)
• Window resize (wait for resize to finish)
• Button clicks (prevent double-clicks)
• Form validation (validate after user stops typing)

Here's how to implement a debounce function from scratch.

Basic Implementation

function debounce(func, delay) {
  let timeoutId;
  
  return function(...args) {
    // Clear previous timeout
    clearTimeout(timeoutId);
    
    // Set new timeout
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

Usage

function handleSearch(query) {
  console.log('Searching for:', query);
  // API call here
}

const debouncedSearch = debounce(handleSearch, 300);

input.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

Preserving Context

function debounce(func, delay) {
  let timeoutId;
  
  return function(...args) {
    const context = this; // Preserve 'this'
    
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

Leading Edge Debounce

Executes on the first call, not the last.

function debounce(func, delay, immediate = false) {
  let timeoutId;
  
  return function(...args) {
    const callNow = immediate && !timeoutId;
    
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      timeoutId = null;
      if (!immediate) func.apply(this, args);
    }, delay);
    
    if (callNow) func.apply(this, args);
  };
}

// Usage: execute immediately, then ignore for 300ms
const debouncedClick = debounce(handleClick, 300, true);

Debouncing is essential for performance optimization in many scenarios.

Search Input

const searchInput = document.getElementById('search');

function performSearch(query) {
  if (query.length < 3) return;
  
  fetch(`/api/search?q=${encodeURIComponent(query)}`)
    .then(res => res.json())
    .then(results => displayResults(results));
}

const debouncedSearch = debounce(performSearch, 300);

searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

Window Resize

function handleResize() {
  // Recalculate layout
  recalculateLayout();
}

window.addEventListener('resize', debounce(handleResize, 250));

Form Validation

function validateField(field) {
  const error = validate(field.value);
  field.classList.toggle('error', !!error);
  field.nextElementSibling.textContent = error || '';
}

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', debounce(() => {
    validateField(input);
  }, 500));
});

Preventing Double-Submit

async function submitForm(formData) {
  const submitBtn = document.querySelector('button[type="submit"]');
  submitBtn.disabled = true;
  
  try {
    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData)
    });
    showSuccess();
  } catch (error) {
    showError(error);
  } finally {
    submitBtn.disabled = false;
  }
}

// Prevent rapid clicks
const debouncedSubmit = debounce(submitForm, 1000);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  debouncedSubmit(getFormData());
});

Canceling Debounced Calls

const debouncedSearch = debounce(performSearch, 300);

// Cancel pending call
debouncedSearch.cancel = () => clearTimeout(debouncedSearch.timeoutId);

// Cancel on navigation
window.addEventListener('beforeunload', () => {
  debouncedSearch.cancel();
});