意義：
在進(jìn)行窗口的 resize、scroll渣慕、輸入框內(nèi)容驗(yàn)證嘶炭、touchmove 等操作時(shí)抱慌，如果事件處理函數(shù)調(diào)用的頻率無限制，會(huì)加重瀏覽器負(fù)擔(dān)眨猎，甚至卡死抑进。導(dǎo)致用戶體驗(yàn)很糟糕。
此時(shí)可以采用 debounce（防抖）和 throttle（節(jié)流）的方式減少調(diào)用頻率睡陪，同時(shí)不影響實(shí)際效果
防抖
當(dāng)持續(xù)觸發(fā)事件時(shí)寺渗，一定時(shí)間段內(nèi)沒有再觸發(fā)事件，事件處理函數(shù)才會(huì)執(zhí)行一次宝穗。如果設(shè)定的事件到來之前户秤，又觸發(fā)了事件，就重新開始延時(shí)
function debounce(fn, wait) {
var timeout = null;
return function() {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
};
}
// 處理函數(shù)
function handle() {
console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener("scroll", debounce(handle, 1000));
節(jié)流
當(dāng)持續(xù)觸發(fā)事件時(shí)逮矛，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)鸡号。
例如。當(dāng)持續(xù)觸發(fā) scroll 事件時(shí)须鼎，并不立即執(zhí)行回調(diào)鲸伴，每隔 1s 才會(huì)執(zhí)行一次
1.時(shí)間戳方式實(shí)現(xiàn)
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
};
};
function handle() {
console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));
2.定時(shí)器方式實(shí)現(xiàn)
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
};
};
function handle() {
console.log(Math.random());
}
window.addEventListener("scroll", throttle(handle, 1000));
總結(jié)
函數(shù)防抖：講幾次操作合為一次操作進(jìn)行。原理是維護(hù)一個(gè)定時(shí)器晋控，規(guī)定在delay時(shí)間后觸發(fā)汞窗，但是在delay時(shí)間內(nèi)再次觸發(fā)，就會(huì)取消之前的定時(shí)器重新設(shè)置赡译。這樣一來仲吏，只有最后一次才能觸發(fā)
函數(shù)節(jié)流：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)
區(qū)別：
函數(shù)節(jié)流不管事件觸發(fā)多頻繁蝌焚，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)觸發(fā)一次函數(shù)
防抖只是在最后一次事件后才觸發(fā)一次函數(shù)
比如在頁面的無限加載場(chǎng)景下裹唆，我們需要用戶在滾動(dòng)頁面時(shí)，每隔一段時(shí)間發(fā)一次ajax只洒，而不是在用戶停下時(shí)才去請(qǐng)求许帐。這樣的場(chǎng)景適合用節(jié)流
頁面縮放修改rem設(shè)定，適合用防抖
