3. 实现函数的防抖和节流

[senfish]

请手动实现一个函数的防抖和节流，并且说明使用场景？

[senfish]

函数防抖

定义： 在n秒时间内，函数只会触发一次，如果期间被触发，则重新计时

  function debounce (fn, delay) {
    let timer;
    return function (...argu) {
      let that = this;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(that, argu);
      }, delay);
    }
  }

场景：input框实时搜索、浏览器的resize、和scroll

函数节流

定义： 在n秒内，事件只执行一次，如果期间被触发，也不会响应事件
采用定时器实现：

function throttle(fn, delay) {
  let timer;
  return function (...argu) {
    let that = this;
    if (timer) return false;
    timer = setTimeout(() => {
      fn.apply(that, argu);
      timer = null; // 释放timer变量，让下一次的函数接着执行
    }, delay);
  };
}

采用时间戳实现：

function throttle(fn, delay) {
  let previous = new Date();
  return function (...argu) {
    let nowDate = new Date();
    if (nowDate - previous > delay) {
      fn.apply(this, argu);
      previous = nowDate;
    }
  };
}

场景： 表单重复提交、滚动加载