這篇文章主要介紹了簡單實現節流函數和防抖函數過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
在日常開發中有很多場景我們都需要用到節流函數和防抖函數，比如：實現輸入框的模糊查詢因爲需要輪詢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.防抖函數只會執行一次，且是最後觸發的那一次，而節流函數會規律性的執行多次；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。