防抖和节流

一、防抖

本质： 限制函数回调函数的回调频率,防止同一时间段内超过一次以上的调用。

函数实现： 

1. 定时器限制调用频率

var timer;
debounce(callback(), delay){
    clearTimeout(this.timer);
    this.timer = setTimeout( () => {
        callback()
    }, delay)
}

// 方法二
let timer: number = 0;
const throttle = (delay: number) => {
  let lastTime: number = Date.now();
  if(lastTime - timer > delay) {
    htmltopdf()
  }
  timer = lastTime
};

作用就是： delay秒后再callback(),如果delay时间内重复触发，重新计时。

二、节流

本质： 限制函数在period时间段内只调用一次。

throttle(callback(), delay){
    clearTimeout();
    setTimeout( () => {
        callback()
    }, delay)
}

作用就是： 每隔delay时间执行一次。

三、基本原理

防抖： js单线程，异步任务在任务队列中排队，清除了全局timer，就相当于取消队列排队，然后生成新的timer重新排队。所以会重复触发，以最后一次触发时间为开头。

方法二就是简单的触发时间差比较。

节流： js单线程，异步任务在任务队列中排队，清除了局域timer，任务排队没有取消，然后生成新的timer继续排队，队列中就有多个任务排队，重复触发，多个任务时间起点。

四、总结

个人学习理解，仅供参考！