Blog/NotesConcept

What is Throttling in JavaScript - Implementation & Examples

Understand the concept of throttling in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.

Intermediate

Anuj Sharma

Last Updated Jan 20, 2025


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

throttling resize event - throttling in javascript

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

throttling Scrolling event - throttling in javascript

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 


Share this post now:

Flaunt You Expertise/Knowledge & Help your Peers

Sharing your knowledge will strengthen your expertise on topic. Consider writing a quick Blog/Notes to help frontend folks to ace Frontend Interviews.

Other Related Blogs

Understand Debouncing in JavaScript with Examples

Anuj Sharma

Last Updated Jan 20, 2025

Understand the concept of Debouncing in JavaScript to improve the performance of your web application and optimize the event handling in JavaScript, by limiting API calls or DOM events.

What is javascript:void(0) and How it Works?

Anuj Sharma

Last Updated Jan 5, 2025

A comprehensive explanation about using javascript:void(0) in javascript. When to use javascript:void(0) and how it works with examples of using it with anchor tag.

Explained Web Authorization Techniques - Session & JWT

Anuj Sharma

Last Updated Jan 2, 2025

Understand important web authorization techniques to enhance role-based authentication for any web application with popular techniques like Session & JSON Web Token (JWT)

Understand JavaScript Date Object with Examples (for JavaScript Interviews)

Anuj Sharma

Last Updated Jan 9, 2025

Go through different ways to display dates using javascript date object. It covers examples of date object usage to understand the main concepts of javascript date object.

HTTP/2 vs HTTP/1.1: What's the Key Difference?

Anuj Sharma

Last Updated Jan 29, 2025

Understand the difference between HTTP/2 vs HTTP/1.1 based on the various parameters, which helps to understand the improvement areas of HTTP/2 over HTTP 1.1

Promise Polyfill in JavaScript - Step by Step Explanation

Anuj Sharma

Last Updated Jan 28, 2025

An Interview-focused explanation of Promise Polyfill in JavaScript which helps to understand both Functional and ES6 custom promise implementation.

FrontendGeek
FrontendGeek

© 2024 FrontendGeek. All rights reserved