页面优化之防抖函数和节流函数

一、防抖函数

1. 性质：当我们在短时间内快速多次重复一个相同操作时，只响应第一次或最后一次的操作。
2. 应用场景：input输入框值改变是发请求,onmousemove, resize, onscroll等等
3. 函数体：

function debounce(fn, delay) { //fn要执行的函数，delay表示多少毫秒内就不执行
    let timer = null;
    return function() {
      let that = this; // 注意 this 指向
      let args = arguments; // arguments取出参数
      if (timer) { //如果计时器存在，重置计时
      	clearTimeout(timer);
      }
      timer = setTimeout(() => {
        fn.apply(that, args)
      }, delay)
    }
}

二、节流函数

1. 性质：当我们频繁执行同一个操作，不需要每个操作都响应，只需要固定时间间隔响应。
2. 应用场景：轮播图左右切换等
3. 函数体：

function throttle(fn, delay) {
    let timeout = null;
    return function() {
      let that= this;
      let args = arguments;
      if (!timeout) {//如果没有计时就不执行，每个一段时间执行一次
        timeout = setTimeout(() => {
          timeout = null;
          fn.apply(that, args)
        }, delay)
      }
    }
}
}