What are the differences between debounce and throttle in JavaScript?
Antek N

Debouncing and throttling are two techniques used in JavaScript to control the execution rate of functions, particularly in scenarios where they are triggered frequently, such as handling events. Although they both address the problem of excessive function invocations, they differ in how they handle and limit the frequency of function calls. Let's explore the differences between debounce and throttle: 1. Debounce: - Debouncing is a technique that delays the execution of a function until a certain amount of time has passed since the last invocation. It is commonly used when you want to wait for a "quiet period" before performing an action. If the function is called multiple times within the specified time interval, only the last invocation will be triggered. - Key characteristics: - The function is executed only after a specified delay of inactivity. - If the function is called multiple times within the delay period, the execution is reset, and the timer starts again. - Typically, the function is executed after the delay period since the last function call. - It is useful for scenarios where you want to wait for a pause in activity before taking action, such as search suggestions or auto-saving. 2. Throttle: - Throttling is a technique that limits the execution of a function to a certain rate, ensuring it is called at most once within a specified time interval. It helps control the frequency of function invocations and can be useful when you want to limit the rate of a repetitive action. - Key characteristics: - The function is executed at regular intervals, based on a specified delay. - If the function is called multiple times within the delay period, only the first invocation triggers the execution, and subsequent calls are ignored until the delay period elapses. - It limits the rate at which the function is executed. - It is useful for scenarios where you want to ensure a function is called at a controlled frequency, such as scroll event handlers or button click events. Here's an example illustrating the differences between debounce and throttle:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

// Debounce
function debounce(func, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Throttle
function throttle(func, delay) {
  let throttling = false;

  return function (...args) {
    if (throttling) return;

    throttling = true;
    func.apply(this, args);

    setTimeout(() => {
      throttling = false;
    }, delay);
  };
}

// Usage example
function handleResize() {
  console.log('Resizing...');
  // Perform expensive operation here
}

const debouncedResize = debounce(handleResize, 200);
const throttledResize = throttle(handleResize, 200);

window.addEventListener('resize', debouncedResize);
window.addEventListener('resize', throttledResize);

In this example, thehandleResize function represents the function you want to control.debounce andthrottle functions are used to create debounced and throttled versions ofhandleResize, respectively. When theresize event is triggered on the window, the debounced version (debouncedResize) and the throttled version (throttledResize) are called. The debounced version ensures that the expensive operation is executed only after a 200-millisecond quiet period, whereas the throttled version limits the execution rate to at most one invocation every 200 milliseconds. Choose between debounce and throttle based on your specific use case and requirements. Debouncing is ideal when you want to wait for a pause in activity, while throttling is suitable for limiting the frequency of function invocations to a controlled rate.

Similar Questions