Throttling in JavaScript Guide: How to throttle a function

Have you ever noticed how efficient some web apps’ functionalities are? Alternatively, how does the web application handle user events so effectively?

Throttling is a fundamental JavaScript technique responsible for these web applications’ outstanding speed and efficiency. Throttling is a frequently used technique for improving the speed of code performed repeatedly over time. This approach is used by many developers to improve the speed of online apps.

In this post, we’ll look at what throttling is and how it may increase application performance dramatically. We will also investigate ways to include throttling in our projects. Furthermore, we will examine a number of open-source libraries that provide throttling utility functions.

What is Throttling in JavaScript?

Throttling implies limiting the number of times a function gets called in a certain time period. It will prohibit a function from executing if we have invoked it “recently.” Throttling also guarantees that a function runs at a consistent rate. Throttling or sometimes also called throttle function, is a practice used in websites.

To better understand throttling, consider the following example. Assume you’re heading to an ATM to get some cash. The bank’s guidelines state that you may only withdraw cash once every hour. You proceeded to withdraw cash from the ATM. You afterward discovered that you require additional funds. When you attempted to withdraw more cash, the ATM rejected your request, stating that you could only do so after an hour. No matter how many times you attempt, the ATM will deny your request until one hour has passed since your last transaction. It is known as throttling. We are rate-limiting a function execution over a period of time, in this case, one hour, for performing an ATM transaction.

Debouncing v/s Throttling in JavaScript?

It is important to note that throttle and debounce are very similar because both increase the speed of web applications. They are, however, employed in distinct contexts. We use debouncing when we worry about the final outcome. For instance, waiting until a user finishes typing to retrieve typeahead search results.

When we wish to manage all steps in the process at a controlled rate, a throttle is a perfect tool to utilize. Track the scrolling offsets when the user scrolls across the web application, for example, and request some content from an API or animate particular portions instead of waiting for the user to complete.

How does throttling work in JavaScript?

Let’s take an example to understand better how throttling works in JavaScript. Assume we have a scroll event listener that we utilize to acquire and show new information to a user as they scroll down the page. If we invoke the callback every time the user scrolls, we will soon become overloaded with events if the user scrolls very rapidly because it would create hundreds or thousands of events. Alternatively, we throttle it such that we only call the callback function every 1000ms, resulting in only one callback per second. The result will still feel immediate to the user, but it will be far more computationally efficient.

Why use Throttling in JavaScript?

Throttling functions generate function calls at a predetermined rate. Throttling the callbacks prevents the app from lagging or overloading your server with requests while performing a time-consuming computation or an API request in the event handler callback function.

Implementing Throttling in JavaScript

Using JavaScript, we can quickly implement a throttling mechanism. In JavaScript, we can construct a throttling method as follows:

function throttle(cb, delay) {
  let wait = false;

  return (...args) => {
    if (wait) {
        return;
    }

    cb(...args);
    wait = true;
    setTimeout(() => {
      wait = false;
    }, delay);
  }
}
Code language: JavaScript (javascript)

This code is not straightforward to grasp, especially if you are unfamiliar with functional programming. Let’s have a look at how our throttling mechanism works step by step.

Our throttling method accepts two arguments: a callback function and a millisecond duration. It returns another function, which we’ll refer to as a throttled function.

This function sets the wait variable on the first line. It is important to use the resultant throttle function often, even though we call the throttle() method only once.

When we use the throttle() method, two things happen:

1. The wait variable is declared and initialized to false.
2. From the throttle() function, a function is returned. This function will execute the throttled version of the callback we supplied to the throttle() function.

The throttle() method returns a function with access to the wait variable and two parameters: a callback function and a delay timer. It is due to the fact that the returned function creates a closure with the throttle() method. As a result, the returning function has access to its lexical environment (the variables and parameters of the throttle() function) even after the outer function has done executing.

When the throttle() method’s resultant function gets called, we determine if the value of the wait variable is true or false. We exit the function if it has a value of true. Otherwise, we will execute the callback and create a timeout that will run after the delay argument. The value of the wait variable is set to false by the timeout. The value of the wait variable will be false during the time indicated by the delay parameter, and we will be unable to run the function. As a result, once each period of time, indicated by the delay variable, has passed, we may execute our throttled function once.

Pheww! It is a complicated procedure! However, it works remarkably. There are certain flaws with this implementation that we will address now.

Refactoring throttle implementation

In our prior approach, we did not invoke the callback function until a specific amount of time had passed. It may be sufficient for our throttling requirements, but in most circumstances, we would want to queue up any action that occurs in your throttle so that when your delay is over, it will call the prior iteration of the function.

Let us tweak our prior method slightly to account for events that occur during the delay period.

function throttle(cb, delay) {
  let wait = false;
  let storedArgs = null;

  function checkStoredArgs () {
    if (storedArgs == null) {
      wait = false;
    } else {
      cb(...storedArgs);
      storedArgs = null;
      setTimeout(checkStoredArgs, delay);
    }
  }

  return (...args) => {
    if (wait) {
      storedArgs = args;
      return;
    }

    cb(...args);
    wait = true;
    setTimeout(checkStoredArgs, delay);
  }
}
Code language: JavaScript (javascript)

The code is already a lot scarier, but the essential logic remains the same. The only difference is that we save the events that occur between the delay duration in a variable called storedArgs. When our delay is complete, we check to see whether we have any storedArgs. If we don’t, we go as usual and set the wait to false so we may wait for the next trigger. However, if we have storedArgs, it indicates we called throttle during the wait and want to activate our function with those storedArgs before resetting our timer.

When we trigger our function, we either run the throttled function if our delay is over or save the arguments for use at the end. When the wait has ended, we run our throttled method with any stored parameters. It guarantees that the throttled function always receives the most recent arguments after the delay.

Use cases for throttling

Now let’s talk about some instances when throttling enhances application performance.

Action games

Action games typically need the player to push a button to carry out a crucial action, such as shooting, punching, etc. But users typically press the buttons more than is necessary, perhaps due to the excitement and intensity of the action, as we are aware. The gaming character can only shoot one bullet per second, despite the player hitting “Fire” 10 times in 5 seconds. It seems reasonable in this situation to reduce activities. Limiting the “Fire” action in this case to one second would ignore the second button press per second.

Scroll event listeners

Many web applications utilize a scroll event listener to keep track of the scroll position and load or animate the content appropriately. In these cases, the scroll event may have a negative performance impact if we scroll it too frequently since it contains many videos and images. Thus, we must use throttling for the scroll event.

Button click listeners

Remember the ATM example we used to explain throttling? We won’t be able to make any further transactions until a specified period of time has elapsed. We may also apply it to buttons within a web application. The click event listener’s callback will only run when a specific amount of time has passed since the last invocation. It will help to reduce the user’s spam-clicking.

Pointer events

Throttling with pointer-events is similar to throttling with scroll event listeners. We commonly use the mouse move and other pointer events to track the position of the mouse pointer or cursor. We may animate some stuff based on the mouse position. By restricting the number of calls, throttling would aid in decreasing the huge number of callback invocations.

API calls

In some cases, we may wish to limit how frequently our application calls an external API. In this case, throttling can be advantageous. By rate limiting the calling function, it would eliminate unnecessary API requests to the server.

Implementations of throttling in JavaScript libraries

In this article, we built a throttling function in JavaScript and applied it to apply a rate limit to specific events triggered by web applications. But if we don’t want to, we can choose not to employ our throttling implementation in your applications. Their implementation is already present in frequently used JS libraries. A few of them are Underscore, Lodash, etc.

Conclusion

In this post, we learned about throttling and how it improves the efficiency and stability of web applications. In addition, we built an implementation of the throttling function and discussed how it worked piece by piece. We investigated a few usage situations in which throttling significantly improves web application performance by utilizing minimal resources. We also looked at a few libraries that provide throttling function implementations as an alternative to writing our own code.

Thank you so much for reading ?