Debounce and throttle are two technologies in JavaScript that optimize the execution frequency of high-frequency events. 1. The core of Debounce is that it only executes the last time after multiple triggers, which is suitable for scenes where input box search, window adjustment, etc. that need to wait for stop operation; 2. The core of Throttle is that it only executes it once within a fixed time interval, which is suitable for scenes where scroll monitoring, mouse movement and other scenarios that need to limit the frequency of execution. The difference between the two is the triggering timing and applicable situation: debounce is executed after waiting for the triggering to stop, and throttle is executed periodically. When using it, you need to pay attention to the functions of context binding, parameter passing and optional immediate execution, and can be implemented with the help of the Lodash library.

In JavaScript development, when handling high-frequency events (such as scrolling, adjusting window size, input box input, etc.), if not controlled, it is easy to cause performance problems. Debounce and throttle are two commonly used technical means to optimize the frequency of function execution in these scenarios and improve performance.

What is Debounce?

The core idea of ??Debounce is: in a series of continuous triggers, the function will be truly executed only after a certain period of time after the last trigger, and it will not be triggered again . It is suitable for scenarios where "waiting for the user to stop the operation before executing".

Common uses include:

• Enter the box to search for suggestions (prevent frequent requests)
• Window resize event
• Form Verification

For example, you are typing a search term and sending a request every time you type a word, which is obviously very inefficient. After wrapping with debounce, you can set the request to be sent only after the user stops typing for 300ms.

The implementation method is as follows:

 function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

Example of usage:

 const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
  console.log('Searching for:', e.target.value);
}, 300));

What is Throttle?

The logic of Throttle is to ensure that the function is executed only once within a specified time interval, no matter how many times it is triggered during this time . It is suitable for "limiting frequency of execution".

Typical application scenarios are:

• Scroll event listening (such as infinite scrolling loading)
• Mousemove
• Key control in the game

For example, when the page is scrolled, it will consume a lot of resources if the detection is performed every time the page is scrolled. Use throttle to control it, for example, performing it every 200ms can significantly reduce the calculation pressure.

The simple implementation is as follows:

 function throttle(fn, delay) {
  let lastCall = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
  };
}

Example of usage:

 window.addEventListener('scroll', throttle(() => {
  console.log('Scrolling...');
}, 200));

The difference and choice between Debounce and Throttle

When choosing, you can understand it like this:

• If you want to wait for the user to "do something" before responding, choose debounce
• If you want to "check status every once in a while", choose throttle

Small details need attention

1. this pointing problem: When using debounce/throttle wrapper function in event listener, pay attention to the binding context.
2. Parameter passing: Use apply() or call() to preserve the original parameters.
3. Initial Trigger: Some implementations support the "Execute First Time" option, which can be extended as needed.
4. User library: Lodash has provided mature debounce and throttle implementations, which can be directly introduced and used.

Basically that's it. Although these two techniques are not complicated, they are very practical in actual development, and can play a key role in performance-sensitive scenarios.

The above is the detailed content of Debouncing and Throttling Functions for Performance Optimization in JavaScript. For more information, please follow other related articles on the PHP Chinese website!