Throttling in JavaScript

Throttling in JavaScript

Throttling is a programming technique used to control the rate at which a function is executed over time.

Unlike debouncing, which delays function execution until a period of inactivity, throttling ensures that a function is called at most once within a specified time interval, no matter how many times the event is triggered.

This approach is particularly helpful for improving the performance and responsiveness of web pages that handle frequent events—such as scrolling, resizing, animations, or data fetching—by reducing the number of times those resource-intensive functions are run.

For example, imagine you have a function that fetches data from an API whenever the user scrolls the page. Without any control, this function could be called dozens or even hundreds of times during rapid scrolling, potentially overwhelming the server and consuming unnecessary bandwidth.

By applying throttling, you can ensure that the function runs at most once every second, regardless of how frequently the scroll event is triggered.

This helps prevent server overload, reduces network usage, and keeps your application running smoothly and efficiently.

How to Implement Throttling in JavaScript?

There are multiple ways to implement throttling in JavaScript, but one of the most common approaches involves using a timer function like setTimeout, or calculating the difference between timestamps (the older method).

These techniques wrap the target function and control its execution by enforcing a delay.

With the setTimeout approach, once the function is triggered, it starts a timer, and any subsequent calls within that time frame are ignored.

This ensures the function is only executed once during the specified interval, no matter how many times it's triggered—effectively limiting the rate at which it can run.

function throttle(mainFunction, delay) {
  let timerFlag = null; // Variable to keep track of the timer

  // Returning a throttled version
  return (...args) => {
    if (timerFlag === null) { // If there is no timer currently running
      mainFunction(...args); // Execute the main function
      timerFlag = setTimeout(() => { // Set a timer to clear the timerFlag after the specified delay
        timerFlag = null; // Clear the timerFlag to allow the main function to be executed again
      }, delay);
    }
  };
}

Use Case

// Define a function that fetches some data from an API
function fetchData() {
  console.log("Fetching data...");
  // Simulate an API call with a random delay
  setTimeout(() => {
    console.log("Data fetched!");
  }, Math.random() * 1000);
}

// Throttle the fetchData function with a delay of 5000 ms
const throttledFetchData = throttle(fetchData, 5000);

// Add an event listener to the window scroll event that calls the throttledFetchData function
window.addEventListener("scroll", throttledFetchData);

In this example, we create a throttle function that accepts a callback and a delay as arguments. The throttle function returns a new function that wraps the callback with logic using setTimeout to set up a timer. This timer ensures that the callback is only invoked once within the specified delay. If the returned function is called again before the timer expires, it simply does nothing.

Next, we define a fetchData function, which simulates an API call with a random delay. Using the throttle function, we create a throttledFetchData function with a delay of 5000ms (5 seconds). We then add an event listener to the window’s scroll event, which triggers the throttledFetchData function.

When you run this code and scroll the page, you will observe that the fetchData function is only called once every 5 seconds, no matter how fast or slow you scroll.

Why Use Throttling?

Throttling enhances the performance and user experience of web pages by limiting the frequency of repetitive or unnecessary operations. It helps to avoid several potential issues, such as:

Overloading the server or browser: Throttling ensures that excessive requests or calculations are not sent too frequently, preventing strain on both the server and browser.

Exceeding API rate limits or quotas: Many APIs have limits on how many requests can be made in a given time period. Throttling helps stay within those limits, preventing errors or blocked access.

Wasting bandwidth or resources: Throttling helps reduce unnecessary network requests or operations that aren't relevant to the user, conserving both bandwidth and resources.

Janky or laggy animations or interactions: By limiting the frequency of function calls, throttling ensures smoother and more responsive animations and interactions, avoiding stutter or lag during high-frequency events like scrolling or resizing.