防抖和节流

前端开发过程中，一定听说过防抖和节流，这两个方法早已被纳入lodash库中。

防抖(debounce)

想必大家都坐过电梯，当排队进入电梯时，电梯的门总是在最后一个人进入后的一段时间内关闭，而不是开门后固定时间关闭。那么在前端开发中，假如有个用户搜索输入框，当用户不断键入搜索关键字时，如果频繁发送搜索请求，返回的答案不仅不一定是用户想要的，而且也会给后端带来一定的请求负担，这里就可以使用我们刚说的防抖方法

function debounce(fn, delay) {
  let timer;
  return function () {
    const context = this;
    const args = [...arguments];
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay)
  }
}

防抖的函数其实很简单，就是设置一个定时器，如果定时器时间内，又触发了该函数，那么就清除还未执行的定时器，再重新设置一个新的。直到用户停止触发，执行定时器中的内容。

节流(throttle)

假设你们公司有一个相册浏览的页面，图片太多于是你做了个懒加载，当鼠标快要滑到页面底部时，发起一个ajax请求加载更多的图片。那么在测试时发现，mousewheel这个时间会在你滑动一次滚轮触发几十次。相当于要执行几十次位置计算的函数，十分浪费性能。那么这个时候，就需要考虑是否能写一个函数，让它在固定的时间内最多只触发一次。这种方法就是节流

节流的函数如上，当用户在同一时间段多次执行时，因为已经存在了一个定时器，那么后续的函数不再执行，直接return；

function throttle(fn, delay) {
  let timer;
  return function () {
    if (timer) return;
    const context = this;
    const args = [...arguments];
    fn.apply(context, args);
    timer = setTimeout(function () {
      timer = null;
    }, delay)
  }
}

EmberYu / vic-blog