Interviews Reading

Throttle on Lodash Documentation

Throttle
Yangshun Tay Medium 15 mins 3.77k done Companies
Ex-Meta Staff Engineer
Google Tiktok Walmart Yelp Tiktok Atlassian Uber
Throttling is a technique used to control how many times we allow a function to be executed
over time. When a JavaScript function is said to be throttled with a wait time of X
milliseconds, it can only be invoked at most once every X milliseconds. The callback is Coding and submission is not supported on mobile devices. Use a wider screen to
invoked immediately and cannot be invoked again for the rest of the wait duration. practice solving this question within the editor.
Implement a throttle function which accepts a callback function and a wait duration.
Calling throttle() returns a function which throttled invocations of the callback function Hide solution
following the behavior described above.
Throttle, along with debounce, are among the most common front end interview questions;
Examples it's the front end equivalent of inverting a binary tree. Hence you should make sure that you
are very familiar with both questions.

Solution
1 let i = 0;
2 function increment() {
3 i++;
4 } A throttled function can be in two states: it's either:
5 const throttledIncrement = throttle(increment, 100);
6 Idle: The throttled function was not invoked in the last wait duration. Calling the
7
8
// t = 0: Call throttledIncrement(). i is now 1.
throttledIncrement(); // i = 1
throttled function will immediately execute the callback function without any need to
9 throttle. After this happens, the function enters the "Active" state.
10 // t = 50: Call throttledIncrement() again. Active: The throttled function was invoked within the last wait duration. Subsequent
11
12
// i is still 1 because 100ms have not passed.
throttledIncrement(); // i = 1
calls should not execute the callback function until wait is over.
13
14 // t = 101: Call throttledIncrement() again. i is now 2.
Given that there's a wait duration before the function can be invoked again, we know that
15 // i can be incremented because it has been more than 100ms we will need a timer, and setTimeout is the first thing that comes to mind. Since there are
16 // since the last throttledIncrement() call at t = 0. only two states, we can use a boolean variable to model the state.
17 throttledIncrement(); // i = 2
We will also need to return a function which contains logic surrounding when to invoke the
func . This function needs to do a few things:

Follow Up 1) Throttle invocation

Throttle with cancel and leading/trailing options.
The callback function is invoked immediately and doesn't allow only invocations again until a 7 let shouldThrottle = false;

duration of wait has passed. As mentioned earlier, we can use a boolean variable 8

shouldThrottle to model the states.

9 return function (...args) {
10 if (shouldThrottle) {

When the function is called in the "Idle" state, a few things are done:
11 return;
12 }

1. shouldThrottle is set to true . The function is now in the "Active" state.

13
14 shouldThrottle = true;
2. Invoke func with the appropriate arguments. 15 setTimeout(function () {

3. Use setTimeout to schedule releasing of the lock ( shouldThrottle = false ) after wait 16
17
shouldThrottle = false;
}, wait);
duration. 18
19 func.apply(this, args);
While the lock is active, calls to the throttled function will not invoke func because of the 20 };
shouldThrottle check at the top of the function. 21 }

2) Invoke func with the appropriate arguments Note that there are many variations of throttle and this implementation only covers the
Throttled functions are used like the original functions, so we should forward the value of most common behavior. Some other variations:
this and function arguments when invoking the original callback functions.
1. Have leading and trailing options, including methods to flush and cancel delayed
Invoking the original callback function func has to preserve the reference to this . func invocations, like Lodash's _.throttle .
Therefore: 2. Collect all the throttled invocations and spread them out by executing them at every
Arrow functions cannot be used to declare the inner function due to lexical binding of wait intervals in the future, respecting the rule that there can only be at most one

this . invocation every wait duration. In contrast, this current implementation ignores all
Invoking the original callback function via func(...args) will not forward the correct throttled function invocations when the lock is active.
this reference and cannot be used.

Hence we have to use Function.prototype.apply() / Function.prototype.call() which allows us

Techniques
to specify this as the first argument: Using setTimeout .
func.apply(thisArg, args)
Closures.
func.call(thisArg, ...args)
How this works.
Invoking functions via Function.prototype.apply() / Function.prototype.call() .
JavaScript TypeScript
Resources
1
2
/**
* @callback func
Debouncing and Throttling Explained Through Examples
3 * @param {number} wait
4 * @return {Function} GFE 75 5/70 Mark complete
5 */
6 export default function throttle(func, wait = 0) {