Hone logo
Hone
Problems

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:

  1. func: The function to be throttled. This is the function whose execution you want to control.
  2. interval: The minimum time (in milliseconds) that must pass between executions of func.
  3. 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 to true.
    • 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 to true.

The throttle function should return a throttled version of the original function. This throttled function, when called, should:

  • If leading is true and the throttled function hasn't been called recently, execute func immediately and reset the timer.
  • Regardless of leading, set a timer to execute func after the specified interval if trailing is true.
  • Subsequent calls to the throttled function within the interval should 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

  • func will always be a function.
  • interval will be a positive number.
  • options will be an object or undefined. If options is provided, leading and trailing will be boolean values.
  • The throttled function should maintain the original this context 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.

Loading editor...
javascript