Date: 2019-12-26 14:00:00 tabs date: 2019-12-26 14:00:00 tabs

  • The throttle
  • Image stabilization
  • JavaScript Categories: Web front-end URlName: Throttle&debounce

In front-end development, there are high-frequency triggering events such as Scroll and REsize. If a function is bound to the event, a function will be frequently called countless times, which will cause some performance problems. Throttling and shaking prevention are used to limit the number of function execution after the event is triggered.

The throttle

As the name implies, to control the flow of water, if event triggering is likened to a flow of water, then function throttling is to control the number of times the function is fired, that is, events are fired continuously but the function is executed only once in n seconds. It is mainly used for scroll and resize events, such as determining the position of elements and changing the CSS based on scroll wheel events.

The timer version

const throttle = (func:Function, wait:number) = > {
  / / timer
  let executeTimer = null;
  return (. args:any[]) = > {
    if(! executeTimer) {// Execute the function when the timer does not existfunc(... args);// Assign timer
      executeTimer = setTimeout((a)= > {
        // Wait milliseconds before assigning the value to null
        executeTimer = null; }, wait); }}}Copy the code

The time stamp version

const throttle = (func:Function, wait:number) = > {
  let previous = 0;
  return (. args:any[]) = > {
    const now = Date.now();
    if(now - previous > wait) { func(... args); previous = now; }}}Copy the code

Image stabilization

After the event is triggered, the function can be executed only once within n seconds. If the event is triggered within N seconds, the function execution time is recalculated.

This means that the execution time will keep resetting as long as the event keeps firing for n seconds.

A classic example is the onChange event of input. There are often requirements for data search requests after the user enters the text. If there is no anti-shake processing, the user will trigger a request for each word input. As long as the text is entered within a certain amount of time, the search request is not executed until n seconds after the user typed the last word.

Immediate execution version

A function is executed immediately after an event is raised, or again if the event is not raised within n seconds. Suitable for button anti – shake.

const debounce = (func:Function, wait:number) = > {
  let timer = null;
  return (. args:any[]) = > {
    if(! timer) { func(... args); timer = setTimeout((a)= > {
        timer = null; }, wait); }}}Copy the code

Not an immediate release

The non-immediate version means that the function is not executed immediately after the event is fired, but n seconds later. If the event is fired within n seconds, the function execution time is recalculated. Applies to the onChange event input.

const debounce = (func:Function, wait:number) = > {
  let timer = null;
  return (. args:any[]) = > {
    if(! timer) { timer = setTimeout((a)= >{ func(... args); timer =null; }, wait); }}}Copy the code

reference

  • Function anti-shake and throttling