节流和防抖

在“高频”触发操作的场景下，需要对操作进行优化，防抖和节流是一个很重要的手段。

如： 按钮的点击、联想搜索、页面滚动等场景。

一、防抖

在高频操作下，我们只识别一次触发（可以控制开始触发或者是最后一次触发），一般设置一个阈值，在这个阈值内无论你操作多少次，只执行一次。

简单的防抖操作

    var btn = document.querySelector(".btn");
    btn.addEventListener('click', clickHandler);
    //简单的防抖
    function clickHandler(e) {
      //禁用按钮
      this.disabled = true;
      //进行业务操作
      console.log(this);
      //达到间隔时间启用按钮，如果是向服务器发送请求，可以在请求失败时启用按钮
      setTimeout(() => {
        this.disabled = false;
      },1000)
    }

封装防抖函数

    /**
     * debound 防抖函数
     * @param fn Function 回调函数，事件触发时的执行函数
     * @param wait Int 等待时间，多少时间间隔内触发，默认是600毫秒
     * @param now Boolean 是否在时间间隔开始时触发，默认是true
    */
    function debound(fn, wait = 600, now = true) {
      let timer = null;
      return function (e) {
        let start = now && !timer;
        clearTimeout(timer);
        timer = setTimeout(() => {
          timer = null;
          !now ? fn.call(this, e) : null;
        }, wait);
        start ? fn.call(this, e) : null;
      }
    }

二、节流

在高频操作下，我们不是只识别一次，按照我们设定的间隔时长，操作的时长达到设置的时长就会触发一次。

如：默认情况下，页面滚动时，浏览器在最快的反应时间内（4到6ms之间），就会识别一次事件触发，把绑定的方法执行，这样导致方法执行的次数过多，造成不必要的资源浪费。

简单的节流操作
这个操作存在一个问题，当行为停止时，没有到达时间间隔，最后一次的函数不会被触发

    //簡單的節流
    window.onscroll = function (e) {
      let timer = null;
      return function (e) {
        if (timer) return;
        timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
        }, 200);
        console.log(111);
      }
    }();

封装节流函数

    /**
     * throttle 節流函數
     * @param fn Function 回调函数，事件触发时的执行函数
     * @param wait Int 等待时间，多少时间间隔内触发，默认是600毫秒
    */
    function throttle(fn, wait = 600) {
      let timer = null;
      let prevTime = 0;
      return function (e) {
        let nowTime = Date.now();
        let diffTime = wait - (nowTime-prevTime);
        if (diffTime <= 0) {
          prevTime = nowTime;
          clearTimeout(timer);
          timer = null;
          fn.call(this, e);
        } else if (!timer) {
          timer = setTimeout(() => {
            clearTimeout(timer);
            timer = null;
            fn.call(this, e);
          }, wait);
        }
      }
    }