Implement a debounce function

Question

Write a debounce function that delays invoking a function until after a specified wait time has elapsed since the last time it was invoked.

UtilityMaster · Accepted Answer

Classic debounce implementation:

```javascript
function debounce(func, wait) {
  let timeoutId = null;

return function(...args) {
    // Clear previous timer
    clearTimeout(timeoutId);

// Set new timer
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

// Usage
const debouncedSearch = debounce((query) => {
  console.log('Searching for:', query);
}, 300);

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

The function only executes after the user stops typing for 300ms.

TypeScriptNinja · Answer

TypeScript version with leading/trailing options: ```typescript function debounce any>( func: T, wait: number, options: { leading?: boolean; trailing?: boolean } = {} ) { let timeoutId: ReturnType | null = null; let lastArgs: Parameters | null = null; const { leading = false, trailing = true } = options; return function(this: any, ...args: Parameters) { const shouldCallNow = leading && !timeoutId; lastArgs = args; clearTimeout(timeoutId!); timeoutId = setTimeout(() => { timeoutId = null; if (trailing && lastArgs) { func.apply(this, lastArgs); } }, wait); if (shouldCallNow) { func.apply(this, args); } }; } ``` - **leading: true** - Call immediately on first trigger - **trailing: true** - Call after wait period (default)

Implement a debounce function

2 Answers

Share Your Answer

Related Questions

What is the difference between == and === in JavaScript?

What are closures in JavaScript?

Explain React useCallback vs useMemo

What is the virtual DOM and how does it work?

More from Apple

What is the difference between SQL and NoSQL databases?

What is the difference between Promise.all and Promise.allSettled?