// 防抖函數
function debounce(fn, delay) {
let timer = null
return () => {
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
}, delay)
}
}
實現思路如下，將目標方法（動作）包裝在setTimeout里面，然后這個方法是一個事件的回調函數，如果這個回調一直執行，那么這些動作就一直不執行。為什么不執行呢，我們搞了一個clearTimeout，這樣setTimeout里的方法就不會執行！ 為什么要clearTimeout呢，我們就需要將事件內的連續動作刪掉嘛！待到用戶不觸發這事件了。那么setTimeout就自然會執行這個方法。
那么這個方法用在什么地方呢，就是用於input輸入框架的格式驗證，假如只是驗證都是字母也罷了，太簡單了，不怎么耗性能，如果是驗證是否身份證，這性能消耗大，你可以隔170ms才驗證一次。這時就需要這個東西。或者你這個是自動完全，需要將已有的輸入數據往后端拉一個列表，頻繁的交互，后端肯定耗不起，這時也需要這個，如隔350ms。
function debounce(func, delay) { var timeout; return function(e) { console.log("清除",timeout,e.target.value) clearTimeout(timeout); var context = this, args = arguments console.log("新的",timeout, e.target.value) timeout = setTimeout(function(){ console.log("----") func.apply(context, args); },delay) }; }; var validate = debounce(function(e) {//需創建全局變量用於保存閉包里的變量，防止每次創建新變量后timeout也會創建新的console.log("change", e.target.value, new Date-0) }, 380); // 綁定監聽 document.querySelector("input").addEventListener('input', validate)// 節流函數
function throttle(fn, delay) {
let timer = null
return ()=>{
if(timer !== null){
return
}
timer = true
setTimeout(()=>{
fn()
timer = null
}, delay)
}
}
防抖和節流
相同:在不影響客戶體驗的前提下,將頻繁的回調函數,進行次數縮減.避免大量計算導致的頁面卡頓.
不同:防抖是將多次執行變為最后一次執行，節流是將多次執行變為在規定時間內只執行一次.
防抖
定義:
指觸發事件后在規定時間內回調函數只能執行一次，如果在規定時間內又觸發了該事件，則會重新開始算規定時間。
網上有這個比喻:函數防抖就是法師發技能的時候要讀條，技能讀條沒完再按技能就會刷新技能,重新進行讀條。
四個字總結就是 延時執行
應用場景:
兩個條件:
1,如果客戶連續的操作會導致頻繁的事件回調(可能引起頁面卡頓).
2,客戶只關心"最后一次"操作(也可以理解為停止連續操作后)所返回的結果.
節流
定義:
當持續觸發事件時，在規定時間段內只能調用一次回調函數。如果在規定時間內又觸發了該事件，則什么也不做,也不會重置定時器.
與防抖比較:
防抖是將多次執行變為最后一次執行，節流是將多次執行變為在規定時間內只執行一次.一般不會重置定時器. 即不會if (timer) clearTimeout(timer);(時間戳+定時器版除外)
應用場景:
兩個條件:
1,客戶連續頻繁地觸發事件
2,客戶不再只關心"最后一次"操作后的結果反饋.而是在操作過程中持續的反饋.
例如:
鼠標不斷點擊觸發，點擊事件在規定時間內只觸發一次(單位時間內只觸發一次)
監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷