防抖和节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

 <script>
      
      function debounce(fn, delay) {
        var timer; //维护一个timer
        return function () {
          var _this = this; //取debounce执行作用域的this
          var args = arguments;
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(function () {
            fn.apply(_this.args); //用apply指向调用debounce的对象，相当于_this.fn(args)
          }, delay);
        };
      }

节流：每隔一段时间，只执行一次函数。

 //定时器节流
      function throttle(fn, delay) {
        var timer;
        return function () {
          var _this = this;
          var args = arguments;
          if (timer) {
            return;
          }
          timer = setTimeout(function () {
            fn.apply(_this.args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
          }, delay);
        };
      }
      //时间戳节流

      function throttle(fn, delay) {
        var previous = 0; // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
        return function () {
          var _this = this;
          var args = arguments;
          var now = new Date();
          if (now - previous > delay) {
            fn.apply(_this.args);
            previous = now;
          }
        };
      }

 总结

      相同点：

      都可以通过使用 setTimeout 实现。

      目的都是，降低回调执行频率。节省计算资源。 

      不同点：

       函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。

       函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。

       函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。 

      应用场景：

      函数防抖的应用场景:

       连续的事件，只需触发一次回调的场景有：

       搜索框搜索输入。只需用户最后一次输入完，再发送请求

       手机号、邮箱验证输入检测

       窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。 

       函数节流的应用场景:

       间隔一段时间执行一次回调的场景有：

       滚动加载，加载更多或滚到底部监听

       谷歌搜索框，搜索联想功能

       高频点击提交，表单重复提交