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: 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 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 . handleResize 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: Many JavaScript libraries such as , , offer a throttle method with various additional features. Below you can read a fairly common implementation of the throttle method: lodash underscore rxjs 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): 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.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Eliminating Event Storms With Debouncing in JavaScript

Optimizing Performance With Throttling in JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Eliminating Event Storms With Debouncing in JavaScript

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Eliminating Event Storms With Debouncing in JavaScript

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps