防抖与节流

节流

节流会立即执行一次； 然后在固定的时间之后再执行 应用场景：在滚动事件发起网络罗请求，并不希望用户滚动的时候一直发请求，而是固定时间间隔发送一次请求；

  const throttle = (fns, wait = 50) {
    let lastTime= 0;
    return function (...args) {
      let now = new Date();
      if (now - lastTime > wait){
        lastTime = now;
        fns.apply(this, args);
      }
    }
  }  

防抖

防抖不会立即执行；

如果频率一直比较高，那么可能会只响应了最后一次；

应用场景：当连续点击一个按钮的时候不会每次都执行，而是当用户点击按钮一段时间之后没有再次点击的时候才会触发请求

// 连续多次点击，只会相应最后的一次请求
const debounce = (fn, await)=>{
  // 缓存的定时器id
  let timer = 0;
  // 返回的函数实际上是用户每次调用的函数
  // 如果已经设置了定时器，就清空之前的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(()=>{
      fn.apply(this, args);
    }, await);
  }
}