函數(shù)防抖（debounce）：就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次炒瘟，如果在 n 秒內(nèi)又觸發(fā)了事件，則會重頭開始計算函數(shù)執(zhí)行需要的時間养晋。
函數(shù)節(jié)流（throttle）：就是指連續(xù)觸發(fā)事件，但是在 n 秒中只執(zhí)行一次函數(shù)，時間間隔小于n秒觸發(fā)事件都是無效的兔港。
共通點(diǎn)：兩者一般適合用在頻繁對某事件進(jìn)行操作的場景。
函數(shù)防抖
典型應(yīng)用
- 百度搜索框在輸入稍有停頓時才更新推薦熱詞仔拟。
- 頻繁操作點(diǎn)贊和取消點(diǎn)贊衫樊，需要獲取最后一次操作結(jié)果并發(fā)送給服務(wù)器
原理實現(xiàn)
//函數(shù)防抖
function debounce(handle, delay) {
var delay = delay || 300;
var timer = null;
return function () {
var _this = this;
var _args = arguments;
clearTimeout(timer);
timer = setTimeout(function (){
handle.apply(_this, _args);
}, delay);
}
}
函數(shù)節(jié)流
一個函數(shù)只有在大于執(zhí)行周期時才執(zhí)行，周期內(nèi)調(diào)用不執(zhí)行利花。好像水滴積攢到一定程度才會觸發(fā)一次下落一樣科侈。
典型應(yīng)用：
- 搶券時瘋狂點(diǎn)擊，既要限制次數(shù)炒事，又要保證先點(diǎn)先發(fā)出請求
- 輪播圖左右方向點(diǎn)擊
- 窗口調(diào)整（window.onresize）
- 頁面滾動（window.onscroll）
原理實現(xiàn)
// 函數(shù)節(jié)流
function throttle(handle, wait) {
var wait = wait || 300;
var lastTime = 0;
return function () {
var _this = this;
var _args = arguments;
var nowTime = new Date().getTime();
if ((nowTime - lastTime) > wait) {
handle.apply(_this, _args);
lastTime = nowTime;
}
}
}
