concept

Throttling and debounce are both ways of reducing the frequency of calls.

The similarities are that a callback function and cycle time need to be set. The differences are as follows:

  • Stabilization is performed once 100ms after the trigger has stopped (during which time the callback will theoretically never be triggered as long as the trigger has not stopped).

  • Throttling is performed every 100ms in a continuous triggering process.

The following is a simple flowchart

Throttling throttle

When the callback function is triggered at a high frequency, the throttling operation causes the callback function to be executed at regular intervals.

The key is to get a function to not execute too often and to do things too quickly.

Similar to the ability cooldown ⏱

/** * throttle *@param func 
 * @param wait 
 */
function throttle(func: Function, wait: number) {
  let timer: number = 0;
  return (. args) = > {
    if (timer) { return }
    timer = window.setTimeout(() = >{ func(... args) timer =0
    }, wait)
  }
}
Copy the code

Stabilization debounce

When the callback function is triggered at a high frequency, the anti-shake operation makes the callback function clear the timer and start again within a certain time interval. Output the result once the timing ends.

The core is that when the same event is fired many times in a short period of time, only one callback is executed. Avoid mistaking one event for more than one.

/** * anti-shake *@param func 
 * @param wait 
 */
function debounce(func: ()=>void, wait: number) {
  let timer: number = 0
  return (. args) = > {
    clearTimeout(timer)
    timer = window.setTimeout(() = >{ func(... args) timer =0; // Is it necessary??
    }, wait)
  }
}
Copy the code

Tips: Pay attention to the passing of the remaining args parameters, otherwise the parameters will be lost when the callback function is executed.

🌰 chestnuts

// Listen for the page scroll bar position
const handleScrollTop = () = > {
   const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;console.log('Scroll bar position:' + scrollTop);
}

// Anti-shake: the position of the scroll bar will be output after the scroll has stopped for 100ms
window.onscroll = debounce(handleScrollTop,100)

// Throttle: outputs the scrollbar position every 100ms
window.onscroll = throttle(showTop,100) 
Copy the code

Common scenarios

  • Listen for scroll, Mousemove and other events – throttling (calculate position every second)
  • Listen to the browser window resize operation – anti shake (only need to calculate once)
  • Verification of keyboard text input – shake proof (send a request for verification after continuous input of text, verify once is good)
  • Submit form – Anti-shake (multiple clicks to one)

Throttling and anti-shaking can be used either way. For example, to monitor page scrolling, you can throttling (start a callback every period of time) or anti-shaking (end the current scroll, continue to scroll and wait for the next trigger).

Used in the React

  • The Class in the component

Note that the throttling/stabilization function location is called, and the throttling/stabilization event is bound when the component is initialized, otherwise the callback will not be triggered.

constructor(props: any) { super(props); // Note the binding here!! this.handleScroll = throttle(this.handleScroll, 100) }Copy the code
  • In functional components, special care is required due to rendering issues. You can refer to

React-hooks: How to react-hooks?

Ali’s useDebounce

reference

Github.com/jashkenas/u…

Github.com/lessfish/un…

Linjingyi. Cn/posts / 7 c266…

Juejin. Cn/post / 685457…