第7期 防抖和节流

防抖

比喻

坐电梯事件 电梯不断的上人 电梯就始终不会走

场景

一个输入框输入要搜索的内容然后调接口进行检索，每输入一个字母都会调接口，控制每次输入调接口先对上一次的输入进行清除。

实例

let timer;
function test(){
  timer && clearTimeout(timer);
  timer = setTimeout(() => {
    console.log('执行一些代码');
  }, 1000);
}
// 模拟多次触发事件 通过防抖 达到一次都不执行 因为这里不断在触发 等同于不断有人在上电梯
setInterval(() => {
  test();
}, 1);

let isRun = false;
function test(){
  if(isRun) return null;
  isRun = true;
  setTimeout(() => {
    console.log('执行一些代码');
    isRun = false;
  }, 1000);
}
// 模拟多次触发事件 通过防抖 达到1s执行一次
setInterval(() => {
  test();
}, 1);

节流

比喻

地铁控制人流 虽然每秒只能通过一个人但还是会每秒执行一次

场景

实现一个鼠标滑动，图片跟着鼠标走的功能。每次滑动都调用回调函数去执行图片重定位，会导致卡死。我们可以控制在0.5s内只执行一次回调函数，对于肉眼而言，就像鼠标每次移动都会触发回调函数，但是其实是控制了在0.5s内的执行次数，进行节流。

示例

let lastTime = null;
function test(time){
  let nowTime = new Date();
  if(nowTime -lastTime >time || !lastTime){
    console.log('执行一些代码');
    lastTime = nowTime;
  }
}
// 模拟触发大量事件 通过节流达到1s执行一次
setInterval(() => {
  test(1000);
}, 10);