Optimizing Performance With Throttling in JavaScript

Some browser events have an extremely high-frequency rate. The number of events such as cursor moving, scrolling, resizing the browser window, holding down a key, etc., can reach 100 times per second. Functions called at this frequency of events place a heavy load on the browser and it leads to a decrease in performance. \ Let's code a simple window resize event handler as an example: \ ```javascript const handleResize = () => { const { innerHeigh, innerWidth } = window; console.log({ innerHeigh, innerWidth }); } window.addEventListener('resize', handleResize) ``` \ Try running this code in your browser console and resizing the window, and you will see that this function is called dozens of times even at a small resizing. \ Now imagine that the `handleResize` function has not only output to the console, but a series of operations with complex manipulations with the DOM: in this case, the browser response to rendering will slow down drastically. How can this process be optimized? To reduce the load on the browser, you need to use **throttling**. ## How to use throttling? Throttling allows you to "slow down" the function, i.e. the function will be executed no more than once in the specified period, even if it is called many times during this period. For example, if you set throttle with a time of 100ms on the page scroll event, then the function will be executed every 100ms while scrolling takes place. \ Schematically, this can be displayed in the following way: \ ![](https://cdn.hackernoon.com/images/Gp8uHyvp6hehmnC1gXMD6uAheaF2-nn92g5t.png) Many JavaScript libraries such as **lodash**, **underscore**, **rxjs** offer a throttle method with various additional features. Below you can read a fairly common implementation of the throttle method: \ ```javascript function throttle(fn, time) { let timeout = null; return function () { if(timeout) return; const context = this; const args = arguments; const later = () => { fn.call(context, ...args); timeout = null; } timeout = setTimeout(later, time); } } ``` \ Let's go back to the example with the window resize event handler and see that the throttle handler is called much less frequently (set to 500ms for demonstration purposes): \ ```javascript const handleResize = () => { const { innerHeigh, innerWidth } = window; console.log({ innerHeigh, innerWidth }); } const handleResizeThrottled = throttle(handleResize, 500); window.addEventListener('resize', handleResizeThrottled); ``` \ Therefore, no matter how often some event is called, throttling will not allow the desired function to run too often and will decrease the load on the browser. ## Conclusion That's all I wanted to say about the throttle function. I hope you liked my article and found it useful.

Optimizing Performance With Throttling in JavaScript

Too Long; Didn't Read

@marat

Credibility

RELATED STORIES