What is Throttling in JavaScript - Implementation & Examples

Throttling in javascript is a very frequently used technique nowadays to improve performance by limiting the number of calls when the user uses any web application and there is a function call which used to happen on an event, In this case, we can't control the user behaviour but behind the scenes, we can limit the function calls so that there won't be any performance issue. Let's see the implementation and how it works.

Table of content

1. Throttling in JavaScript
2. Throttling Use-Case Example
3. Final Note

Throttling in JavaScript

Throttling is a technique in JavaScript that limits the number of function calls in a certain interval. This technique can also help in improving web application performance by limiting the number of function calls in cases where a frequent number of calls are happening.

Throttling can also be used to limit the function callbacks associated with the events in javascript, there are a few types of events that generate a large number of callback function calls when events happen for example scrolling and window resize events. These events generate an event call back for each pixel change, but in practical scenarios, there is no requirement to call a function on every pixel change.

 In these cases, throttling can be used to limit the number of function calls on event change and it is helpful to optimize event handling in JavaScript.

Throttling Implementation in JavaScript

The throttle function takes a callback function and an interval, it returns the throttled function. Now the throttled function allows to invoke the actual function once during the mentioned time interval. It doesn't matter how many times the function got involved during the interview but the function will run only once.

Explain the throttling implementation step by step

1. The throttling function requires a flag to limit the calls, and this flag is initialized  true to make sure it will run the first time immediately when the function is called.
2. The throttling function returned the throttled function and required function context and parameters to invoke the function using apply (since arguments are array-like objects).
3. After the invocation, the flag is set to false and have a setTimout logic to make sure the flag will turn true only after the mentioned input interval.

// ⚡ Throttling Implementation Code
const throttle = function (callback, interval) {
  // True allows function call for the first time
  let isCallAvailable = true;

  // It returns a new throttled function
  return function () {
    // Captures context and arguments from the throttled function
    const context = this;
    const args = arguments;

    // Limit the function call through flag.
    if (isCallAvailable) {
      // Called throttled function
      callback.apply(context, args);
      isCallAvailable = false;

      // Set timer to limit the availability of function call through flag for a certain interval
      setTimeout(() => {
        isCallAvailable = true;
      }, interval);
    }
  };
};

How to use the throttle function.

function throttleExample() {
	console.log('Throttling Example');
}

/*
 The new throttledFunction will limit the call once in 5000 secs
 even though there are many function calls during this interval.
*/
const throttledFunction = throttle(throttleExample, 5000);

Throttling Use-Case Examples

1. Throttle Resize Event Callback

Throttling the callback function limits the function call registered with the scrolling event.

let counter = 0;
let throttleCount = 0;

// function without throttling
const withoutThrottle = function () {
  counter++;
  console.log("resize window...", counter);
};

// throttled function
const resizeWindow = function () {
  throttleCount++;
  console.log("throttled resize window...", throttleCount);
};

const ThrottledFunction = throttle(resizeWindow, 1000);

window.addEventListener("resize", withoutThrottle);
window.addEventListener("resize", ThrottledFunction);

Output

2. Throttle Scrolling Event Callback

/* 
   For the scroll event to work, there should be a scroll bar
   <div style="height: 500px" id="app"></div>
*/

let counter = 0;
let throttleCount = 0;

// function without throttling
const withoutThrottle = function () {
  counter++;
  console.log("scroll window...", counter);
};

// throttled function
const scrollWindow = function () {
  throttleCount++;
  console.log("throttled scroll window...", throttleCount);
};

const ThrottledFunction = throttle(scrollWindow, 1000);

window.addEventListener("scroll", withoutThrottle);
window.addEventListener("scroll", ThrottledFunction);

Output

Final Note

Throttling in javascript is a very important technique to know, in order to improve performance by limiting API calls to the server or optimizing event handling in the web application. "How to limit a function call, when the function call invocation is happening very frequently" is a very common frontend interview question to limit the function calls based on the throttling technique, that function can have any specific job like sending analytics to the server, logging data to the server, changing UI effect etc.

Hope this post helps you to understand the throttling in javascript very effectively. Happy Coding :)  

⏩ Next, Read

Best Resources to understand throttling & debouncing