Picture of the author

Amit Khonde

JavaScript Interviews: Writing a custom throttle function

Throttling function calls is one of the most used concepts on web pages today. Every popular JavaScript helper library like Lodash and Underscore provides a throttle function. There are popular uses of throttling for noting user activity on scrolling or window resizing. This makes writing custom throttle function one of the hot questions for interviews.

If you folks the simplest explanation on what throttle is, you can refer to this simplest explaination on debounce and throttle.

Question

Write a custom throttle function that will take a function fn and time t (milliseconds) as parameters. The function will return the throttled version of fn

Example Usage

1 2 3 4 5 6 7 8 9 function scrollHandler() { // An expensive API call } function throttle(fn, t) { // Write your code here } const throttledScrollHandler = scrollHandler(clickHandler, 300);

Note: Before diving into the solution, try to solve this problem on your own. Here is a hint: Think closures and setTimeout.

Answer

When I am solving any problem, I always like to write the obvious things first. Those things can be found by reading the problem statement itself. There are 2 very obvious things in this question:

  • Our custom throttle function is going to return a function.
  • That returned function is going to execute the fn that we received in the parameters.

Let us start with writing code for these 2 things first

1 2 3 4 5 function throttle(fn, t) { return function() { fn(); } }

The very first time the throttled function is called, it will execute fn. And for the next t seconds, if our throttled function is called, we will ignore and return. Let us see what we can do to achieve this step by step

  • We can keep one variable canCallFunc. If this variable is true we will call fn. Otherwise, we will return.
  • We will initialize canCallFun with true because we want to call fn for the first time.
  • We will have to declare canCallFunc in the outer function to keep its value across multiple calls. This concept is known as Closures.
  • To block further executions of fn , when we execute it once, we will make canCallFunc false.
  • To unblock function execution again, we will set a timer for time t and will set canCallFunc to true at the end.
  • if any parameters are passed to our throttled function, we have to pass to fn while execution.

Well, this is a lot of explanation. let us see some actual code. This is what the final version of throttle looks like:

1 2 3 4 5 6 7 8 9 10 11 12 13 function throttle (fn, t) { let canCallFunc = true; return function(){ let args = arguments; if(canCallFunc){ fn(args); canCallFunc = false; setTimeout(() => { canCallFunc = true; }, t); } } }

Conclusion

Yay!! This looks like a working solution now. But there are still minor problems with this solution like handling the context of the function. I encourage you to write the code that will handle this condition. And for more interesting questions like this, keep following this series. Until then, Happy Coding!!

Share

Share on twitter
Share on facebook

Like what you are reading? Subscribe for new posts every week