????防抖和節(jié)流嚴(yán)格算起來應(yīng)該屬于性能優(yōu)化的知識,但實(shí)際上遇到的頻率相當(dāng)高,處理不當(dāng)很容易引起瀏覽器崩潰壶辜！
????日常開發(fā)過程中，滾動事件做復(fù)雜計(jì)算頻繁調(diào)用回調(diào)函數(shù)很可能會造成頁面的卡頓铛漓，這時候我們更希望把多次計(jì)算合并成一次溯香，只操作一個精確點(diǎn)，JS把這種方式稱為debounce（防抖）和throttle（節(jié)流）
debounce（防抖）
當(dāng)持續(xù)觸發(fā)事件時浓恶，一定時間段內(nèi)沒有再觸發(fā)事件玫坛，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定時間到來之前包晰，又觸發(fā)了事件湿镀，就重新開始延時。也就是說當(dāng)一個用戶一直觸發(fā)這個函數(shù)伐憾，且每次觸發(fā)函數(shù)的間隔小于既定時間勉痴，那么防抖的情況下只會執(zhí)行一次。
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());
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));
throttle（節(jié)流）
當(dāng)持續(xù)觸發(fā)事件時树肃，保證在一定時間內(nèi)只調(diào)用一次事件處理函數(shù)蒸矛，意思就是說，假設(shè)一個用戶一直觸發(fā)這個函數(shù)，且每次觸發(fā)小于既定值雏掠，函數(shù)節(jié)流會每隔這個時間調(diào)用一次
用一句話總結(jié)防抖和節(jié)流的區(qū)別：防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行廓脆，節(jié)流是將多次執(zhí)行變?yōu)槊扛粢欢螘r間執(zhí)行
實(shí)現(xiàn)函數(shù)節(jié)流我們主要有兩種方法：時間戳和定時器
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now(); //設(shè)置開始時間
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime); //剩余時間
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) { // 第一次觸發(fā)立即執(zhí)行
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining); //取消當(dāng)前計(jì)數(shù)器并計(jì)算新的remaining
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
在節(jié)流函數(shù)內(nèi)部使用開始時間startTime、當(dāng)前時間curTime和剩余時間remaining磁玉，當(dāng)剩余時間小于等于0意味著執(zhí)行處理函數(shù)，這樣保證第一次就能立即執(zhí)行函數(shù)并且每隔delay時間執(zhí)行一次驾讲；如果還沒到時間蚊伞，就會在remaining之后觸發(fā)，保證最后一次觸發(fā)事件也能執(zhí)行函數(shù)吮铭，如果在remaining時間內(nèi)又觸發(fā)了滾動事件时迫，那么會取消當(dāng)前的計(jì)數(shù)器并計(jì)算出新的remaing時間。通過時間戳和定時器的方法谓晌，我們實(shí)現(xiàn)了第一次立即執(zhí)行掠拳，最后一次也執(zhí)行，規(guī)定時間間隔執(zhí)行的效果纸肉，可以靈活運(yùn)用在開發(fā)中溺欧。
