簡單實現節流函數和防抖函數，我奶奶看完都懂了

　　在平常開發中有不少場景咱們都須要用到節流函數和防抖函數，好比：實現輸入框的模糊查詢由於須要輪詢ajax，影響瀏覽器性能，因此須要用到節流函數；實現手機號、姓名之類的的驗證，每每咱們只須要驗證一次，這個時候咱們就須要用到防抖函數；可是網上的不少資料都是不夠具體和便於理解。今天本身翻閱了一些資料以後，來簡單的談談我對節流函數和防抖函數的理解，但願能幫助你們理解；

　　節流函數

　　　　顧名思義，就是節省流量節省內存性能的一種函數，能夠理解爲是一種性能優化方案；

　　　　舉個例子：一個水龍頭一直在滴水，可能一次性會滴不少水，可是咱們想控制它的頻率 ，讓它每1000毫秒滴一滴水，這個時候咱們就能夠用到節流函數來進行控制（簡單能夠理解爲相似於週期性定時器）

　　　　js代碼（可直接複製到編輯器上看效果）：

//首先定義一個全局變量
var canRun = true;
//當瀏覽器窗口大小發生變化也就是從新計算窗口大小的時候觸發
window.onresize = function(){
//  取反，canRun爲false的狀況下
if(!canRun){
//直接return，後面的代碼不執行
  return
}
//走到這來就是canRun爲true的狀況，而後進行賦值爲false
canRun = false

//設置一個定時器進行輪詢操做
setTimeout( function () {
//這是要作的事情
    console.log("函數節流")
//最後記得從新賦值true繼續讓他取反
    canRun = true
//每隔1000毫秒也就是1秒鐘就執行一次

  }, 1000)
}

　　效果圖以下：

　　

　　防抖函數

 

　　　　防抖函數和節流函數很相似，可是稍有區別，防抖函數的定義是當事件觸發完成以後再延遲觸發，而且只觸發一次；若是在觸發完成以前再次觸發，則會再次刷新延遲；簡單理解爲（若是事件不觸發即不執行，而且只會執行一次，就是定時器最後走的那一次）

 　　　　　舉個例子：假若有個彈簧，你一直往下按壓只要你不鬆手就是不會彈出的，彈簧只有在你鬆手的那一瞬間纔會彈出去；防抖函數也是如此，只要事情觸發沒有結束是不會執行的，只有在事件觸發結束後延遲執行一次；

　　　　js代碼（可直接複製到編輯器上看效果）：

//定義方法即要作的事情
function fun(){
  console.log('onresize')
  
}
//定義事件觸發要執行的方法，兩個參數分別是傳入的要作的事情和定時器的毫秒數
function debounce(fn,delay){
　　//定義一個變量做爲等會清除對象
        var handle;
　　//這裏用到了閉包，一個函數裏面return另外一個函數，變量相互籤引致使垃圾回收機制不會銷燬handle變量
        return function(){
　　　　　　//在這裏必定要清除前面的定時器，而後建立一個新的定時器
            clearTimeout(handle) 
　　　　　　//最後這個定時器只會執行一次也就是事件觸發完成以後延遲500毫秒再觸發（這裏的變量賦值是跟定時器創建鏈接，進行地址賦值，必定要從新賦值給handle  
         handle=setTimeout(function(){
             fn()
         },delay)
        }
        
      }
//給瀏覽器添加監聽事件resize
window.addEventListener('resize', debounce(fun, 500));

 

 效果圖以下：

　　

 

 

 　　總結：

　　　　1.防抖函數和節流函數都是用來提高性能優化及用戶體驗的一種方案；

　　　　2.防抖函數只會執行一次，且是最後觸發的那一次，而節流函數會規律性的執行屢次；