防抖和节流

防抖

1. 概念

   事件被触发 n 秒后再执行回调函数，如果在这 n 秒内被触发，则重新计时。

2. 应用场景

   输入框实时搜索、resize、scroll

3. 实现

function debounce(fn, delay) {
  return function() {
    let that = this;
    let args = arguments;
    clearTimeout(fn.si);
    fn.si = setTimeout(() => {
      fn.apply(that, args);
    }, delay);
  };
}

节流

1. 概念

   规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行

2. 应用场景

   鼠标不停点击、无限加载、底部自动加载

3. 实现

function throttle(fn, delay) {
  let last;
  return function() {
    let that = this;
    let _args = arguments;
    let now = Date.now();
    if (last && now - last < delay) {
      fn.si = setTimeout(() => {
        last = now;
        fn.apply(that, _args);
      }, delay);
    } else {
      last = now;
      fn.apply(that, _args);
      clearTimeout(fn.si);
    }
  };
}