JavaScript(防抖与节流)

什么是防抖？防抖是防止用户频繁触发导致代码不断执行的一种思想，在延迟函数中，频繁触发事件时，会被重新记时。防抖一般用于处理连续的快速触发事件。防抖事件：(点击按钮，输入框输入，浏览器视口发生变化)

 什么是节流？节流是在一定时间内，频繁触发事件，函数只执行一次。节流是用于限制频繁触发行为的频率，节流事件：(滚动事件，鼠标移动)

   那么如何封装一个防抖函数和节流函数？

// 封装防抖
      function debounce(callback, time = 300) {
        var d = null;
        return function () {
          if (d != null) clearTimeout(d);
          var _this = this;
          var _event=arguments[0];
          d=setTimeout(function(){
            // 有回调函数，改变this指向，传递事件对象给callback
            callback && callback.apply(_this,[_event])
            // 释放变量
            d=null;
          },time)
        };
      }

在封装过程中可以对定时器函数进行清除，再执行定时器，执行完定时器后，将定时器释放掉，这样的操作就是一个防抖思想啦。

例子：var box_element = document.querySelector(".box");(在script中获取页面上的dom元素)

 box_element.οnmοusemοve=debounce(function(event){},300)  （使用时将debounce函数传递进去，放一个回调函数作为参数执行）

  // 封装节流
      function throttle(callback, time = 300) {
        var isShow = false;
        // 返回函数
        return function () {
          if (isShow) {
            return;
          } else {
            isShow = true;
            // 记录当前的this
            var _this = this;
            // 事件对象
            var arg = arguments[0];
            setTimeout(function () {
              // setTimeout里的this是window
              if (callback) callback.apply(_this, [arg]);
              isShow = false;
            }, time);
          }
        };
      }

在封装节流函数时，同样是传递一个回调函数进去，记录this指向，获取事件对象，因为setTImeout函数是window下的方向，里面this会指向window，因此要改变this指向，用apply指向上面记录的this.

例子：var box_element = document.querySelector(".box");(在script中获取页面上的dom元素)

 box_element.οnmοusemοve=throttle(function(event){},300)  （使用时将throttle函数传递进去，放一个回调函数作为参数执行）

使用防抖函数，可以减少函数作用域中代码的执行次数；节流函数的处理是在规定时间内，执行一次代码（间隔时间到了就执行代码，不会重新计算相隔时间）