Implement Debounce with Flush Method

Problem Statement

Sometimes we need to immediately execute a pending debounced function—for instance, when a form is submitted or before the page unloads. Implement a debounce with both cancel and flush capabilities.

Requirements

Implement a debounce(func, wait) function that returns a debounced function with:

• cancel() - cancels pending invocation without executing
• flush() - immediately executes pending invocation (if any)
• Flush should be a no-op if nothing is pending
• After flush, the timer should be cleared

Example Usage

const autoSave = (content) => {
  console.log(`Auto-saving: ${content}`);
};

const debouncedSave = debounce(autoSave, 5000);

// User types
debouncedSave("Hello");
debouncedSave("Hello World");

// User clicks "Save Now" button
debouncedSave.flush(); // Immediately logs: "Auto-saving: Hello World"

// User continues typing
debouncedSave("Hello World!");

// Page is about to unload
window.addEventListener("beforeunload", () => {
  debouncedSave.flush(); // Ensure no data loss
});

Real-world Context

• Auto-save with manual save option
• Form validation with submit button
• Analytics batching with page unload

Follow-up Questions

1. Should flush return the result of the function call?
2. How would you handle async functions with flush?