Understanding the Throttle Function in TypeScript

In web development, managing the rate at which functions are executed is essential for optimizing performance and ensuring a smooth user experience. One effective method to achieve this is through the use of a throttle function. In this article we are going to explain what a throttle function is and its purpose, before putting it in practice with a TypeScript example.

What is the Throttle Function?

A throttle function is a higher-order function that ensures a specific function is executed at most once within a defined time interval. Unlike a debounce function, which delays the function execution until a period of inactivity, a throttle function allows the function to be called at regular intervals, regardless of how frequently it is triggered. This is particularly useful in scenarios where actions should be performed consistently, such as handling scroll events or resizing the window.

Implementing the Throttle function

Let's consider we are handling the resize event of the browser window.

TypeScript
window.addEventListener('resize', handleWindowResize);

Without throttling, the event handler could be called numerous times per second, leading to performance issues. By applying a throttle function, we can ensure the event handler is called at a controlled rate. Let's define the throttle function and its arguments.

TypeScript
const throttle = <T extends unknown[]>(
  callback: (...args: T) => void,
  delay: number,
) => {}

We'll start by returning a function that executes the callback function.

TypeScript
const throttle = <T extends unknown[]>(
  callback: (...args: T) => void,
  delay: number,
) => {
  return (...args: T) => {
    callback(...args);
  };
}

Now, we need to ensure that the callback function isn't executed every time our returned function is called.

TypeScript
const throttle = <T extends unknown[]>(
  callback: (...args: T) => void,
  delay: number,
) => {
  let isWaiting = false;
 
  return (...args: T) => {
    if (isWaiting) {
      return;
    }
 
    callback(...args);
    isWaiting = true;
 
    setTimeout(() => {
      isWaiting = false;
    }, delay);
  };
};

When the returned function is called for the first time, the callback is executed and isWaiting is set to true. This prevents the callback from being executed again until the setTimeout function sets isWaiting back to false after the specified delay. This mechanism ensures that the callback is only executed at controlled intervals. We are now ready to use our throttle function.

TypeScript
const throttle = <T extends unknown[]>(
  callback: (...args: T) => void,
  delay: number,
) => {
  let isWaiting = false;
 
  return (...args: T) => {
    if (isWaiting) {
      return;
    }
 
    callback(...args);
    isWaiting = true;
 
    setTimeout(() => {
      isWaiting = false;
    }, delay);
  };
};
 
window.addEventListener('resize', throttle(handleWindowResize, 100));

Conclusion

The throttle function is an essential tool for managing the frequency of function executions in web development. By controlling how often a function is called, throttling helps maintain performance and ensures consistent behavior.