防抖与节流

防抖与节流函数算是比较常用的前端工具方法了，以前是只知其然，对其所以然只了解个大概，最近仔细研究了下其中的代码流程，并记下来供以后参考。

防抖

防抖（debounce）：当事件持续触发时，规定时间内没有触发第二次，则执行事件处理函数，否则将不会执行事件处理函数。常用在输入框模糊搜索的场景，当用户在一定时间内没有进行键盘输入才会将输入的关键词发送给后台。
代码实现：

/**
 * @description: 防抖
 * @param {Function} [fn] 事件处理函数
 * @param {Number} [wait] 响应时间
 * @return: {Function}
 */
const debounce = (fn, wait) => {
  let timer = null;
  return function() {
     if(timer!==null){
      clearTimeout(timer);
     }
    timer = setTimeout(fn, wait);
  }
}

节流

节流（throttle）：当事件持续触发时，规定时间段内只让事件处理函数触发一次。与防抖的区别在于节流在高频事件持续触发时是“以较低的节奏触发事件处理函数”，个人认为可以类比于定时器setInterval。节流常用在诸如用户滚动屏幕，浏览器窗口大小缩放，鼠标移动时需要周期性进行的处理操作（比如保存用户目前的位置）。
代码实现：

/**
 * @description: 节流
 * @param {Function} [fn] 事件处理函数
 * @param {Number} [time] 响应时间间隔(默认500毫秒)
 * @return: {Function}
 */
const throttle = (fn, time = 500) => {
    let notFirst = false; // 是否不是第一次触发
    let start = Date.now();
    return function(...args) {
        let current = Date.now();
        let flag = notFirst && current - start < time; // 节流阀开关
        if (!flag) {
            fn.apply(this, args);
            notFirst = true;
            start = Date.now();
        }
    };
};

以上是使用时间戳实现的节流函数，可以保证第一次触发事件就让处理函数执行一次。