Author of the Image Pedro Vezini Flickr

Throttling or not throttling with JavaScript

Have you ever been in a situation where you can’t manage all the scroll’s Events, thus decreasing the performance of your web? Well, you’re not the only one! But that is why we have Throttling on our side. Throttling helps run a function event once, as simple as it sounds, you’ll see.

First of all, what is throttling?

“Throttling is used to call a function after every millisecond or a particular interval of time only the first click is executed immediately.”

With this we can clarify that instead of 500 events we can have one event, and how can we use it?

Well, the best way to play with this feature is on the scroll event, because we always scroll the page from the top to the bottom and every part of the page, if we make just a single scroll we will make a lot of Events.

At the same time. This increases the interactions of the page.

With just one scroll, we are creating a bad user experience and decreasing performance constantly with the addition of events on the browser.

Example of too many Events

For now, I will create just a function to increase the scroll events and we will fix it in a moment:

This is a small function that listens for the scroll event, and it just has a console.log sending the Event.

window.addEventListener( 'scroll', ( e ) => {
console.log( e )
})

Figure 1 Clean console and starting point

In this example I have three big black boxes and we will scroll to the bottom with the scroll event, and we will see what is happening on the console of our Chrome’s DevTools

Figure 2 Example problem with the Scroll Event

Did you see that (Figure 2)? We have a lot of events on the console with the scroll Event, and it was just the first small scroll.

How can we fix this?

Well, we need to do Throttling!

Let’s go through the code!

1. Create a cache variable and set it to null
2. Listen for the scroll event. Here we add an if statement with the conditional “!cache”. This will be true the first time and we will enter to the if condition.
3. Inside the if statement, we add our setTimeout method with 1000ms, within our setTimeout we add a simple console.log and setting the cache variable to null
4. After the setTimeout method we set the cache variable to the scroll event

Overall, in each scroll event will trigger just one setTimeout method after 1000ms thus we run one function instead of too many scroll Events.

let cache = null
window.addEventListener('scroll', (e) =>{
if( !cache ){
setTimeout(() => {
// All the Code
console.log( e )
cache = null
}, 1000)
cache = e
}
})

Let´s try it!

Figure 3 Solution for too many scroll events

I scrolled more than before almost reaching the second section, this time we can only see one scroll event in the console, in other words, it doesn’t matter how many times you want to scroll you will receive just one scroll event for each 1000 milliseconds (1 second).

And if you want to check it out, here is the complete code on CodePen (Figure 4 below), enjoy! 😊😎

Figure 4 Complete code of the example in CodePen

Conclusion

To summarize, throttling is deeply helpful to increase performance, it is really clean and also helps out with events who execute more than one time, this is a small way to do it, but there are more libraries that manage more advance throttling, one great example is Lodash_.throttle() method.

1. Copes, F. (2019, August 13). How to work with scrolling on Web Pages. Rod. Retrieved May 19, 2022, from https://flaviocopes.com/scrolling/

2. GeeksforGeeks. (2021, October 24). JavaScript | Throttling. Retrieved May 22, 2022, from https://www.geeksforgeeks.org/javascript-throttling/