函数节流throttle与防抖debounce

解释

节流：事件触发后，规定的时间内，事件处理函数不能再次调用。也就是说在规定时间内事件函数只能调用一次，且是最先调用的那次。
防抖：多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发，执行之前会等待一段时间（这时间是己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果再次触发了，重新开始计算时间，直到能最终执行。

使用场景

1.节流：滚动加载更多，搜索框联想功能，高频点击，表单重复提交

防抖：搜索框输入后自动搜索，手机号、邮箱验证输入检测等

代码

  /*函数防抖*/
    function debounce(fn,wait){
      let during = wait || 400; // 等待时间如果没有传参默认是400ms
      let timer;
      return function () {
          clearTimeout(timer);
          let _this = this;   // 备份上下文
          let args = arguments; // 保存事件参数
          timer = setTimeout(()=>{ // 延迟执行事件
              fn.apply(_this,args);
          },during)
      }
  }
/*函数节流*/
        function throttle(fn, wait) {
            let during = wait || 400;
            let startTime = Date.parse(new Date());
            let timer;
            return function () {
                let nowTime = Date.parse(new Date());
                let _this = this;
                let args = arguments;
                let RemainTime = during - (nowTime - startTime);
                clearTimeout(timer);
                if (RemainTime <= 0) {
                    fn.apply(_this, args)
                    startTime = Date.parse(new Date());
                } else {
                    timer = setTimeout(fn, RemainTime)
                }
            }
        }