一文看懂如何簡單實現節流函數和防抖函數

2019-11-19 10:52:45

字體：大中小

來源：轉載

供稿：網友

前言

在日常開發中有很多場景我們都需要用到節流函數和防抖函數，比如：實現輸入框的模糊查詢因為需要輪詢ajax，影響瀏覽器性能，所以需要用到節流函數；實現手機號、姓名之類的的驗證，往往我們只需要驗證一次，這個時候我們就需要用到防抖函數；但是網上的很多資料都是不夠具體和便于理解。今天自己翻閱了一些資料之后，來簡單的談談我對節流函數和防抖函數的理解，希望能幫助大家理解；

節流函數

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

舉個例子：一個水龍頭一直在滴水，可能一次性會滴很多水，但是我們想控制它的頻率，讓它每1000毫秒滴一滴水，這個時候我們就可以用到節流函數來進行控制（簡單可以理解為類似于周期性定時器）

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

//首先定義一個全局變量var canRun = true;//當瀏覽器窗口大小發生變化也就是重新計算窗口大小的時候觸發window.onresize = function(){// 取反，canRun為false的情況下if(!canRun){//直接return，后面的代碼不執行 return}//走到這來就是canRun為true的情況，然后進行賦值為falsecanRun = 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)  }    }//給瀏覽器添加監聽事件resizewindow.addEventListener('resize', debounce(fun, 500));

效果圖如下：