Implementing a JavaScript Throttler
Throttling is a crucial technique for controlling the rate at which a function is executed, especially when dealing with rapidly firing events like window resizing, scrolling, or user input. This challenge asks you to implement a throttler function in JavaScript that limits the execution of a provided function to a specified interval. This is useful for optimizing performance and preventing excessive computations.
Problem Description
You are tasked with creating a JavaScript function called throttle that takes three arguments:
func: The function to be throttled. This is the function whose execution you want to control.interval: The minimum time (in milliseconds) that must pass between executions offunc.options: An optional object that can contain the following properties:leading: A boolean indicating whether the throttled function should be executed on the leading edge of the interval (i.e., immediately when the throttler is first called). Defaults totrue.trailing: A boolean indicating whether the throttled function should be executed on the trailing edge of the interval (i.e., after the interval has elapsed). Defaults totrue.
The throttle function should return a throttled version of the original function. This throttled function, when called, should:
- If
leadingis true and the throttled function hasn't been called recently, executefuncimmediately and reset the timer. - Regardless of
leading, set a timer to executefuncafter the specifiedintervaliftrailingis true. - Subsequent calls to the throttled function within the
intervalshould be ignored until the timer expires.
The throttled function should maintain its original this context and arguments.
Examples
Example 1:
Input:
func = () => console.log("Executing!");
interval = 1000;
throttledFunc = throttle(func, interval);
throttledFunc(); // Executes immediately (leading = true by default)
throttledFunc(); // Ignored
throttledFunc(); // Ignored
setTimeout(throttledFunc, 1500); // Executes after 1000ms (trailing = true by default)
Output:
"Executing!"
(after 1000ms) "Executing!"
Explanation: The first call executes immediately. The subsequent calls are ignored until 1000ms have passed, at which point the trailing execution occurs.
Example 2:
Input:
func = () => console.log("Executing!");
interval = 500;
options = { leading: false, trailing: true };
throttledFunc = throttle(func, interval, options);
throttledFunc(); // Ignored
throttledFunc(); // Ignored
setTimeout(throttledFunc, 250); // Ignored
setTimeout(throttledFunc, 750); // Executes after 500ms
Output:
(after 500ms) "Executing!"
Explanation: leading is false, so the first call is ignored. The trailing execution happens after 500ms.
Example 3: (Edge Case - Rapid Calls)
Input:
func = () => console.log("Executing!");
interval = 200;
options = { leading: true, trailing: false };
throttledFunc = throttle(func, interval, options);
throttledFunc(); // Executes immediately
throttledFunc(); // Ignored
throttledFunc(); // Ignored
throttledFunc(); // Ignored
Output:
"Executing!"
Explanation: leading is true, so the first call executes immediately. trailing is false, so no further executions occur.
Constraints
funcwill always be a function.intervalwill be a positive number.optionswill be an object orundefined. Ifoptionsis provided,leadingandtrailingwill be boolean values.- The throttled function should maintain the original
thiscontext and arguments. - The throttled function should not leak memory. Timers should be cleared appropriately.
- Performance: The throttled function should introduce minimal overhead.
Notes
Consider using setTimeout or setInterval to implement the throttling logic. Pay close attention to the leading and trailing options to ensure the throttled function behaves as expected in different scenarios. Think about how to handle the this context and arguments correctly when the throttled function is eventually executed. A closure is likely necessary to maintain state. Remember to clear timers to prevent memory leaks.