Implement a Debounce Function
3 minintermediatereactcodingdebouncefunction
Quick Answer
Create a debounce function with TypeScript types that properly handles the this context and cleanup.
Detailed Answer
Implement a Debounce Function
Create a debounce function with TypeScript types that properly handles the this context and cleanup.
Solution:
function debounce<T extends (...args: any[]) => any>(
func: T,
wait: number,
immediate?: boolean
): (...args: Parameters<T>) => void {
let timeout: NodeJS.Timeout | null = null;
return function executedFunction(this: any, ...args: Parameters<T>) {
const later = () => {
timeout = null;
if (!immediate) func.apply(this, args);
};
const callNow = immediate && !timeout;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(this, args);
};
}
// Usage
const debouncedSearch = debounce(function(this: any, query: string) {
console.log('Searching:', query);
}, 300);
// Cleanup method
function debounceWithCleanup<T extends (...args: any[]) => any>(
func: T,
wait: number
): T & { cancel: () => void } {
let timeout: NodeJS.Timeout | null = null;
const debounced = function(this: any, ...args: Parameters<T>) {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
} as T & { cancel: () => void };
debounced.cancel = () => {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
};
return debounced;
}