Implement a Basic Debounce Function

Problem Statement

As a Staff Engineer, I often see performance issues in production caused by excessive function calls during user interactions like typing, scrolling, or resizing. Your task is to implement a debounce utility function that limits how often a function can be executed.

Requirements

Implement a debounce(func, wait) function that:

• Returns a new function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked
• The debounced function should receive all arguments passed to it
• The this context should be preserved

Example Usage

const searchAPI = (query) => {
  console.log(`Searching for: ${query}`);
};

const debouncedSearch = debounce(searchAPI, 300);

// User types quickly
debouncedSearch("h");
debouncedSearch("he");
debouncedSearch("hel");
debouncedSearch("hell");
debouncedSearch("hello");

// Only "Searching for: hello" is logged after 300ms

Real-world Context

At scale, this pattern is critical for:

• Search-as-you-type features (reducing API calls)
• Window resize handlers (preventing layout thrashing)
• Auto-save functionality (batching saves)

Follow-up Questions

1. What is the time and space complexity of your solution?
2. How does debounce differ from throttle?
3. When would you choose debounce over throttle?