1.使用场景：

是在写keyup事件的时候，每次触发，都会请求后台接口，为了避免，每次请求，键盘弹起之后，隔上一段时间再去请求，所以用防抖函数

2.概念：

（1）什么是防抖：多次事件触发后、事件处理函数只执行一次，并且是在触发操作结束时执行。

（2）原理：延时操作处理函数、若设定的延时到来之前、再次触发函数、则清除上一次的延时操作定时器、重新定时

3.使用：

原先代码这样写的：

$("#key").on("keyup",keyupfn());
      function keyupfn(){
          var timer=null;
          return function (){                    
              clearTimeout(timer);
              timer=setTimeout(function(){
              var Val=$("#key").val();
              $.ajax({
                  type: "post",
                  url: "",
                  data: {name:Val},
                  dataType: "json",
                  success: function(res) {
                                    // 请求成功
                  }
               });
           },800);
      }
}

使用封装后的：

注：第一个this，只是在刚开始，keyup事件，监听的时候，被调用了，之后，每次触发keyup事件，都是调用的debounce函数return出来的函数

关于this的指向：①谁调用函数，this就指向谁；②debounce这个外层函数与里面return出来的函数的调用者，是没有关系的；③debounce是window调用的，返回的函数是触发keyup调用的，是keyup事件触发了返回的函数，而不是debounce方法

function debounce(method,delay) {
         let timer = null;
         console.log("window", this) //1、 debounce是window调用的
         return function () {
              console.log("keyup事件调用的11111", this) // 2、this指向$("#key)
              let self = this,
                  args = arguments;
              timer && clearTimeout(timer);
              timer = setTimeout(function () {
                  method.apply(self,args);
              },delay);
         }
}
$("#key").on("keyup",debounce(function () {
        var Val=$("#key").val();
        console.log("keyup事件调用的222222", this) // 3、 this指向$("#key)
        $.ajax({
             type: "post",
             url: "",
             data: {name:Val},
             dataType: "json",
             success: function(res) {
                        
             }
        });
    },1000)
);

链接: https://fly63.com/article/detial/5474