備注：以下僅為防抖和節(jié)流代碼思路解釋灰署，實(shí)際應(yīng)用中需根據(jù)需要做相應(yīng)調(diào)整赁濒。僅供參考两入。
防抖
const debounce = (fn, delay) => {
let timeout = null;
return (...rest) => {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, rest);
}, delay);
};
};
代碼解釋：
1.第一次進(jìn)入防抖方法净宵，設(shè)置定時(shí)器，延時(shí)執(zhí)行方法fn谆刨。
2.第二次進(jìn)入防抖方法塘娶，timeout條件符合 則清除定時(shí)器，fn方法被清掉痊夭。
3.除非某次執(zhí)行的速度晚于延時(shí)（delay）的時(shí)間刁岸，才執(zhí)行一次fn方法
4.以此達(dá)到防抖的效果。
總結(jié)：防抖就是在多次連續(xù)執(zhí)行方法時(shí)（如連續(xù)請(qǐng)求接口）她我，通過定時(shí)器延時(shí)虹曙，符合延時(shí)時(shí)機(jī)的時(shí)候，才執(zhí)行一次方法（接口請(qǐng)求）番舆。如果在延時(shí)時(shí)間內(nèi)請(qǐng)求酝碳，則重新開啟定時(shí)器。
節(jié)流
// 定時(shí)器版節(jié)流
const throttle = (fn, delay) => {
let timeout = null;
return (...rest) => {
if (!timeout) {
fn.apply(this, rest);
timeout = setTimeout(() => {
timeout = null;
}, delay);
}
};
};
代碼解釋：
1.第一次進(jìn)入節(jié)流方法恨狈，timeout條件符合疏哗，執(zhí)行fn方法。
2.設(shè)置定時(shí)器timeout禾怠，條件變?yōu)椴环稀?br>
3.定時(shí)器延時(shí)（delay）設(shè)置timeout為null返奉，條件變?yōu)榉稀?br>
4.進(jìn)而執(zhí)行一次fn方法。
總結(jié)：節(jié)流就是在多次連續(xù)執(zhí)行方法時(shí)（如滾動(dòng)條執(zhí)行事件）吗氏，通過定時(shí)器延時(shí)芽偏，每隔一段時(shí)間，才執(zhí)行一次方法弦讽。即每隔一段時(shí)間執(zhí)行一次污尉。
// 時(shí)間戳版節(jié)流
const throttle = (fn, delay) => {
let last = 0;
return (...rest) => {
const now = Date.now();
if (now >= delay + last) {
fn.apply(this, rest);
last = now;
}
};
};
代碼解釋：
1.第一次進(jìn)入節(jié)流方法，條件符合，設(shè)置當(dāng)前時(shí)間戳被碗，執(zhí)行fn方法某宪。
2.第二次進(jìn)入節(jié)流方法，新的時(shí)間戳大于等于延時(shí)（delay）加上次時(shí)間戳锐朴，則條件成立繼續(xù)執(zhí)行fn方法缩抡。
3.中間延時(shí)（delay）的時(shí)間間隔，即達(dá)到了節(jié)流的作用包颁。
總結(jié)：節(jié)流就是在多次連續(xù)執(zhí)行方法時(shí)（如滾動(dòng)條執(zhí)行事件），通過時(shí)間戳和延時(shí)相加對(duì)比压真，大于時(shí)間間隔的娩嚼，才執(zhí)行一次方法。即每隔一段時(shí)間執(zhí)行一次滴肿。
