解釋
- 節(jié)流：事件觸發(fā)后蚁滋，規(guī)定的時間內(nèi)宿接，事件處理函數(shù)不能再次調(diào)用。也就是說在規(guī)定時間內(nèi)事件函數(shù)只能調(diào)用一次辕录，且是最先調(diào)用的那次睦霎。
- 防抖：多次觸發(fā)事件，事件處理函數(shù)只能執(zhí)行一次走诞，并且是在觸發(fā)操作結(jié)束時執(zhí)行副女。也就是說，當(dāng)一個事件被觸發(fā)蚣旱，執(zhí)行之前會等待一段時間（這時間是己去定義的碑幅，比如 1 秒），如果沒有再次被觸發(fā)塞绿，那么就執(zhí)行沟涨，如果再次觸發(fā)了，重新開始計算時間异吻，直到能最終執(zhí)行裹赴。
使用場景
1.節(jié)流：滾動加載更多，搜索框聯(lián)想功能，高頻點(diǎn)擊棋返，表單重復(fù)提交
- 防抖：搜索框輸入后自動搜索延都，手機(jī)號、郵箱驗(yàn)證輸入檢測等
代碼
/*函數(shù)防抖*/
function debounce(fn,wait){
let during = wait || 400; // 等待時間如果沒有傳參默認(rèn)是400ms
let timer;
return function () {
clearTimeout(timer);
let _this = this; // 備份上下文
let args = arguments; // 保存事件參數(shù)
timer = setTimeout(()=>{ // 延遲執(zhí)行事件
fn.apply(_this,args);
},during)
}
}
/*函數(shù)節(jié)流*/
function throttle(fn, wait) {
let during = wait || 400;
let startTime = Date.parse(new Date());
let timer;
return function () {
let nowTime = Date.parse(new Date());
let _this = this;
let args = arguments;
let RemainTime = during - (nowTime - startTime);
clearTimeout(timer);
if (RemainTime <= 0) {
fn.apply(_this, args)
startTime = Date.parse(new Date());
} else {
timer = setTimeout(fn, RemainTime)
}
}
}
