防抖
運(yùn)行方式：在第一次觸發(fā)事件時食磕，不立即執(zhí)行函數(shù)，而是給出一個期限值比比如200ms毅往，
1牵咙，如果在200ms內(nèi)沒有再次觸發(fā)滾動事件，那么就執(zhí)行函數(shù)
2攀唯，如果在200ms內(nèi)再次觸發(fā)滾動事件洁桌，那么當(dāng)前的計時取消，重新開始計時
效果：如果短時間內(nèi)大量觸發(fā)同一事件侯嘀，只會執(zhí)行一次函數(shù)另凌。
使用場景：搜索框input事件，例如要支持輸入實(shí)時搜索可以使用節(jié)流方案（間隔一段時間就必須查詢相關(guān)內(nèi)容）戒幔，或者實(shí)現(xiàn)輸入間隔大于某個值（如500ms）吠谢，就當(dāng)做用戶輸入完成，然后開始搜索诗茎，具體使用哪種方案要看業(yè)務(wù)需求工坊。
function debounce(fn,delay){
let timer = null //借助閉包
return function() {
if(timer){
clearTimeout(timer) //進(jìn)入該分支語句，說明當(dāng)前正在一個計時過程中，并且又觸發(fā)了相同事件王污。所以要取消當(dāng)前的計時罢吃，重新開始計時
timer = setTimeOut(fn,delay)
}else{
timer = setTimeOut(fn,delay) // 進(jìn)入該分支說明當(dāng)前并沒有在計時，那么就開始一個計時
}
}
}
截流
運(yùn)行方式：如果短時間內(nèi)大量觸發(fā)同一事件昭齐，那么在函數(shù)執(zhí)行一次之后尿招，該函數(shù)在指定的時間期限內(nèi)不再工作，直至過了這段時間才重新生效
使用場景：頁面resize事件阱驾，常見于需要做頁面適配的時候就谜。需要根據(jù)最終呈現(xiàn)的頁面情況進(jìn)行dom渲染（這種情形一般是使用防抖，因?yàn)橹恍枰袛嘧詈笠淮蔚淖兓闆r）
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
//休息時間 暫不接客
return false
}
// 工作時間里覆，執(zhí)行函數(shù)并且在間隔期內(nèi)把狀態(tài)位設(shè)為無效
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
