The Difference and Application Scenarios of Debounce and Throttle

In front-end development, we often need to control frequently triggered events to improve performance and user experience. Debounce and throttle are two commonly used techniques. This article will introduce the concepts of debounce and throttle, their differences, and their application scenarios in actual development.

Debounce

Debounce is a technique for controlling the frequency of function calls. When an event is continuously triggered, debounce delays the execution of the function until the event stops triggering for a period of time. If the event is triggered again during the delay period, the timer restarts.

Example Code

1
function debounce(func, wait) {
2
  let timeout;
3
  return function (...args) {
4
    clearTimeout(timeout);
5
    timeout = setTimeout(() => {
6
      func.apply(this, args);
7
    }, wait);
8
  };
9
}
10

11
// Apply debounce
12
const handleResize = debounce(() => {
13
  console.log("Window resized");
14
}, 300);
15

16
window.addEventListener("resize", handleResize);

In the above code, the handleResize function is executed only once, 300 milliseconds after the window resizing stops.

Throttle

Throttle is also a technique for controlling the frequency of function calls, but unlike debounce, throttle ensures that the function is executed only once within a certain time interval, regardless of how many times the event is triggered during that interval.

Example Code

1
function throttle(func, delay) {
2
  let lastCall = 0;
3
  return (...args) => {
4
    const now = new Date().getTime();
5
    if (now - lastCall < delay) {
6
      return;
7
    }
8
    lastCall = now;
9
    return func(...args);
10
  };
11
}
12

13
// Apply throttle
14
const handleScroll = throttle(() => {
15
  console.log("Window scrolled");
16
}, 300);
17

18
window.addEventListener("scroll", handleScroll);

In the above code, the handleScroll function is executed every 300 milliseconds during window scrolling.

Differences Between Debounce and Throttle

• Trigger Method:

  • Debounce: Executes the function after the event stops triggering for a period of time.
  • Throttle: Executes the function once within a certain time interval.

• Application Scenarios:

  • Debounce: Suitable for scenarios where processing should occur after the user stops input or operation, such as search box auto-completion and form validation.
  • Throttle: Suitable for scenarios where the function should be executed only once within a certain period, such as window scroll events and preventing multiple button clicks.

Application Scenarios

Debounce Application Scenarios

1. Search Box Auto-Completion: Sends requests only after the user stops typing.
2. Form Validation: Prevents frequent triggering of validation logic, validating only after the user stops typing.
3. Window Resizing: Prevents frequent triggering of adjustment logic while the user is resizing the window.

Throttle Application Scenarios

1. Window Scroll Events: Prevents frequent triggering of scroll logic, such as lazy loading and infinite scrolling.
2. Preventing Multiple Button Clicks: Prevents multiple request submissions caused by rapid button clicks.
3. Update Logic in Animations and Games: Ensures that update logic is executed only once within a certain time interval to prevent performance issues.

Summary

Debounce and throttle are commonly used techniques in front-end performance optimization. They control the frequency of function calls to avoid performance issues caused by frequently triggered events. Debounce is suitable for scenarios where the function should be executed after the event stops triggering, while throttle is suitable for scenarios where the function should be executed only once within a certain time interval. Understanding and appropriately applying these techniques can significantly improve application performance and user experience.