Skip to main content

Mario Aguiar.

Implementing throttle in Vanilla JavaScript

Published ago
Updated ago
6 min read

Hi, welcome to this video tutorial, this time I will be showing how to create a simple throttle function using only Vanilla JavaScript.

What is Vanilla JavaScript?

Vanilla JavaScript, or Vanilla JS is nothing more than simple and pure JavaScript, that's what we call it when we don't use libraries like Underscore, or frameworks like React.

What is “throttle”?

I assume that if you are watching this tutorial you already know what it means, or at least you have an idea, so I won't delve much into the subject, but I will leave an article that explains it in the references section in the description and post that accompany this video.

Basically throttle is known as the practice where a function is executed only once during a certain interval of time. For example, the user clicks a button that executes a function, the function is executed once.

What would happen if the user clicks a hundred times on the same button?

A: The function would be executed a hundred times, bad for performance.

Let's consider that we have HTML code, in which this button is included:

1<button id='js-say-hello'>Say Hello</button>
2

And we anchor an event like this, which logs “Hello world!” in the console:

1const button = document.querySelector('#js-say-hello');
2const sayHello = () => {
3  console.log('Hello World!');
4};
5if (button) {
6  button.addEventListener('click', sayHello);
7}
8

If we open this code in the browser, we can see that each time we click, a new entry is recorded in the console.

To avoid this, we define a time interval (for example one second) during which no matter how many clicks the user gives, the function will be executed only once. Once this interval ends, we can execute it only once more during another second, and so on. It will only be executed once per second.

How is throttle implemented?

In the following example we will implement a simple version of Throttle, taking as reference the previous code, we will implement the following:

1const throttle = (callback, delay) => {
2  // We start a variable to know when the function was last called
3  let lastCalled = 0;
4  return (...args) => {
5    // We save a reference to this moment.
6    const now = new Date().getTime();
7    // We check if the defined delay time has passed
8    if (delay > now - lastCalled) {
9      return;
10    }
11    // We save this moment as the last time the function was called
12    lastCalled = now;
13    // We execute the function
14    return callback(...args);
15  };
16};
17export default throttle;
18

Now, since we have implemented our function, all we have to do is replace in our original code, the call to the function by wrapping it in our Throttle.

1// Import our function
2import throttle from './throttle.js';
3const button = document.querySelector('#js-say-hello');
4// Wrap our message in a new function
5const printMessage = () => {
6  console.log('Hello World!');
7};
8// Run Throttle
9const sayHello = throttle(printMessage, 1000);
10if (button) {
11  button.addEventListener('click', sayHello);
12}
13

Now, when we click on our button, we can see that no matter how many times we click, it will only be executed once per second, if we increase the delay time, we can see a clearer example, this time I am using three seconds:

Additional notes

A very important point that we must take into account is that when using this method, the clicks are not added to a queue, this means that they are not saved to be executed later, simply if you click while the established time has not passed, that click would be lost.

You can see this code working on Codepen (it is recommended to open the link to see the console).

References