Anti-shake, throttling practical application

concept:

Anti-shake: A new event triggers in the cycle, clears the old timer, and resets the new timer

/*
*func:回调函数
*wait:执行时间
*/

// 防抖
function debounce(func, wait) {
    
    
    var timerId = null;
    return function (...args) {
    
    
      if (timerId) {
    
    
         clearTimeout(timerId);
       }
        timerId = setTimeout(() => {
    
    
            func.apply(this,args);
        }, wait);
     }
}
 // 实例化防抖函数
var antiShake = debounce(fn, 1000)
// 调用函数传入value
 antiShake(value)

concept:

Throttling: After a high-frequency event is triggered, the function will only be executed once within n seconds, but if it has been triggered, it will be executed every n seconds, which is equivalent to the execution frequency of the diluted function

/*
*func:回调函数
*time:执行时间
*/
// 节流
function throttleTimer(func, time){
    
    
  let timerId = null
  return function () {
    
    
    var args = arguments
    if (!timer) {
    
    
      timerId = setTimeout(function () {
    
    
        func.apply(this,args)
        timerId = null
      }, time)
    }
  }
}
 // 实例化节流函数
var throttle= throttleTimer(fn, 1000)
// 调用函数传入value
 throttle(value)

Guess you like

Origin blog.csdn.net/lyf976229437/article/details/111945769