|
1 | 1 | Implement a debounce function which accepts a callback function and a wait duration. Calling debounce() returns a function which has debounced invocations of the callback function |
2 | 2 |
|
3 | 3 | ```js |
4 | | -function debounce(func: (...args: any[]) => void, wait: number): (...args: any[]) => void { |
5 | | - let timeoutId: ReturnType<typeof setTimeout> | undefined; |
6 | | - |
7 | | - return function (...args: any[]) { |
8 | | - if (timeoutId !== undefined) { |
9 | | - clearTimeout(timeoutId); |
10 | | - } |
11 | | - |
12 | | - timeoutId = setTimeout(() => { |
13 | | - func.apply(this, args); |
14 | | - }, wait); |
15 | | - }; |
16 | | -} |
| 4 | +export default function debounce(func, wait) { |
| 5 | + if (typeof func !== 'function') { |
| 6 | + throw new TypeError('Expected a function'); |
| 7 | + } |
| 8 | + |
| 9 | + let timeoutId; // Stores the ID of the currently active timeout |
17 | 10 |
|
18 | | -// Example usage: |
19 | | -const debouncedFunction = debounce(() => { |
20 | | - console.log('Function executed!'); |
21 | | -}, 1000); |
| 11 | + return function (...args) { |
| 12 | + // Save the context and arguments for the callback function |
| 13 | + const context = this; |
22 | 14 |
|
23 | | -// Calling the debounced function multiple times within 1 second will only execute the callback once. |
24 | | -debouncedFunction(); |
25 | | -debouncedFunction(); |
26 | | -debouncedFunction(); |
| 15 | + // Clear the previous timeout, if any, to reset the timer |
| 16 | + clearTimeout(timeoutId); |
| 17 | + |
| 18 | + // Set a new timeout to execute the callback function after the wait period |
| 19 | + timeoutId = setTimeout(() => { |
| 20 | + func.apply(context, args); // Execute the callback in the proper context |
| 21 | + }, wait); |
| 22 | + }; |
| 23 | +} |
27 | 24 | ``` |
| 25 | + |
| 26 | +### Explanation |
| 27 | +#### Validate the Input: |
| 28 | +We check if func is a valid function. If not, we throw a TypeError. |
| 29 | + |
| 30 | +#### Declare `timeoutId`: |
| 31 | +This variable is used to track the currently set timeout. |
| 32 | + |
| 33 | +#### Return the Debounced Function: |
| 34 | +The `debounce` function returns a new function. This returned function: |
| 35 | + |
| 36 | +* Clears the timeoutId timer using clearTimeout if it exists. This ensures that the previous scheduled execution is canceled. |
| 37 | +* Sets a new timer using the setTimeout function with the specified wait duration. |
| 38 | + |
| 39 | +#### Call the Function with Proper Context: |
| 40 | +When the timer expires, we use `func.apply(context, args)` to invoke the callback function with the proper `this` context and arguments. This ensures that the callback behaves as expected in the context of the calling code. |
0 commit comments