JS simple implementation of anti-shake - debounce and throttling - throttle

1. What is anti-shake and throttling?

Ps: For example, in the search box, the user uses the change event to call the search when typing. If the user If you search every time you enter, how much server resources will be consumed? Even if your server resources are very powerful, you don't want to do this.

1. Anti-shake - debounce

One solution is to search for ## every time the user stops typing and the delay exceeds 500ms #String, this is anti-shake.

• Principle: Combine several function calls into one, and be called only once after a given time has passed.

• Code implementation:

function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 记录当前函数调用次数
// 当用户滚动时被调用的函数
function foo() {
  flag++;
  console.log('Number of calls: %d', flag);
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
document.body.addEventListener('scroll', debounce(foo, 2000));

1. debounce After the function is encapsulated, return to the internal Function

2. Every time an event is triggered, the current

   timer will be cleared and the timeout will be reset and called. This will cause each high-frequency event to cancel the previous timeout call, causing the event handler to not be triggered

3. Only when the high-frequency event stops, the timeout call triggered by the last event can Execute

# after

delay

time 2. Throttle - throttle

Another solution than

antishake Be more relaxed. At this time, we don’t want the user to input blindly, but give the user some search prompts, so the limit is to query the String every time 500ms. This is throttling.

• Principle: No matter how frequently the event is triggered, the throttling function will ensure that the real event processing function will be executed once within the specified time.

• There are two code implementations, one is timestamp and the other is timer

  1) Timestamp implementation:
  

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

When a high-frequency event is triggered, it should be executed immediately for the first time (if the interval between the event-binding function and the actual triggering event is greater than

delay), and then no matter how frequently the event is triggered, the same It will be executed every delay seconds. When the last event is triggered, the event will no longer be executed.

2) Timer implementation:

When an event is triggered, we set a timer. When the event is triggered again, if the timer exists, it will not be executed; until
delay After seconds, the timer executes the execution function and clears the timer so that the next timer can be set.

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

When the event is triggered for the first time, the function will definitely not be executed immediately, but will be executed after

delay seconds. After that, events are triggered continuously and will be executed every
delay seconds. When the last stop is triggered, the function may be executed again due to the
delay delay of the timer.

3) Combined use of timestamps and timers, the throttling function will be executed immediately when an event is triggered, and the throttling function

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}

needs to be executed in each

delayThe function will definitely be executed once in time, so the start time, current time and delay are used inside the throttling function to calculate remaining, when remaining <= 0 indicates that it is time to execute the function. If the time has not yet arrived, set it to trigger after the remaining time. Of course, if an event occurs again during remaining, the current timer will be canceled and a remaining will be recalculated to determine the current status.

Related articles:

Detailed explanation of throttling and anti-shake debounce of javascript function

Detailed explanation of throttling and anti-shake of javascript function

The above is the detailed content of JS simple implementation of anti-shake - debounce and throttling - throttle. For more information, please follow other related articles on the PHP Chinese website!