防抖函數與節流函數

時間 2019-11-19

標籤函數節流简体版

原文原文鏈接

1.使用場景：是在寫keyup事件的時候，每次觸發，都會請求後臺接口，爲了不，每次請求，鍵盤彈起以後，隔上一段時間再去請求，因此用防抖函數javascript

2.概念：java

（1）什麼是防抖：屢次事件觸發後、事件處理函數只執行一次，而且是在觸發操做結束時執行。ajax

（2）原理：延時操做處理函數、若設定的延時到來以前、再次觸發函數、則清除上一次的延時操做定時器、從新定時json

3.使用：瀏覽器

原先代碼這樣寫的：app

$("#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出來的函數post

關於this的指向：①誰調用函數，this就指向誰；②debounce這個外層函數與裏面return出來的函數的調用者，是沒有關係的；③debounce是window調用的，返回的函數是觸發keyup調用的，是keyup事件觸發了返回的函數，而不是debounce方法this

function debounce(method,delay) {
         let timer = null;
         console.log("window", this) //一、 debounce是window調用的
         return function () {
              console.log("keyup事件調用的11111", this) // 二、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) // 三、 this指向$("#key)
        $.ajax({
             type: "post",
             url: "",
             data: {name:Val},
             dataType: "json",
             success: function(res) {
                        
             }
        });
    },1000)
);

節流

1.貼代碼：url

function throttle (method,delay) {
    var timer = null;
    console.log("第一次觸發")
    return function () {
        var self = this,
            args = arguments;
        console.log("是否要請求",timer)
        if (timer) return
        timer = setTimeout(function () {
            clearInterval(timer)
            timer = null;
            method.apply(self, args);
        },delay)
    }
}
$("#key").on("keyup",throttle(function () {
     var Val = $("#key").val();
     console.log("請求中")
     $.ajax({
           type: "post",
           url: "",
           data: {name:Val},
           dataType: "json",
           success: function(res) {
                  
           }
      });
},2000));