參考博客：JS防抖和節(jié)流掖蛤，感謝作者的用心分享
日常開(kāi)發(fā)過(guò)程中傻昙，滾動(dòng)事件做復(fù)雜計(jì)算頻繁調(diào)用回調(diào)函數(shù)很可能會(huì)造成頁(yè)面的卡頓，這時(shí)候我們更希望把多次計(jì)算合并成一次素标，只操作一個(gè)精確點(diǎn)，JS把這種方式稱(chēng)為debounce（防抖）和throttle（節(jié)流）
函數(shù)防抖
當(dāng)持續(xù)觸發(fā)事件時(shí)萍悴，一定時(shí)間段內(nèi)沒(méi)有再觸發(fā)事件头遭，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定時(shí)間到來(lái)之前癣诱，又觸發(fā)了事件计维，就重新開(kāi)始延時(shí)。也就是說(shuō)當(dāng)一個(gè)用戶(hù)一直觸發(fā)這個(gè)函數(shù)狡刘，且每次觸發(fā)函數(shù)的間隔小于既定時(shí)間享潜，那么防抖的情況下只會(huì)執(zhí)行一次困鸥。
function debounce(fn, wait) {
var timeout = null; //定義一個(gè)定時(shí)器
return function() {
if(timeout !== null)
clearTimeout(timeout); //清除這個(gè)定時(shí)器
timeout = setTimeout(fn, wait);
}
}
// 處理函數(shù)
function handle() {
console.log(Math.random());
}
// 滾動(dòng)事件
window.addEventListener('scroll', debounce(handle, 1000));
如上所見(jiàn)嗅蔬，當(dāng)持續(xù)觸發(fā)scroll函數(shù)，handle函數(shù)只會(huì)在1秒時(shí)間內(nèi)執(zhí)行一次疾就，在滾動(dòng)過(guò)程中并沒(méi)有持續(xù)執(zhí)行澜术，有效減少了性能的損耗
函數(shù)節(jié)流
當(dāng)持續(xù)觸發(fā)事件時(shí)，保證在一定時(shí)間內(nèi)只調(diào)用一次事件處理函數(shù)猬腰，意思就是說(shuō)鸟废，假設(shè)一個(gè)用戶(hù)一直觸發(fā)這個(gè)函數(shù)，且每次觸發(fā)小于既定值姑荷，函數(shù)節(jié)流會(huì)每隔這個(gè)時(shí)間調(diào)用一次
用一句話(huà)總結(jié)防抖和節(jié)流的區(qū)別：防抖是將多次執(zhí)行變?yōu)樽詈笠淮螆?zhí)行盒延，節(jié)流是將多次執(zhí)行變?yōu)槊扛粢欢螘r(shí)間執(zhí)行
實(shí)現(xiàn)函數(shù)節(jié)流我們主要有兩種方法：時(shí)間戳和定時(shí)器
例如
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this; //this指向window
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));
這個(gè)節(jié)流函數(shù)利用時(shí)間戳讓第一次滾動(dòng)事件執(zhí)行一次回調(diào)函數(shù)，此后每隔1000ms執(zhí)行一次鼠冕，在小于1000ms這段時(shí)間內(nèi)的滾動(dòng)是不執(zhí)行的
再舉一個(gè)定時(shí)器的例子：
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));
當(dāng)觸發(fā)事件的時(shí)候添寺，我們?cè)O(shè)置了一個(gè)定時(shí)器，在沒(méi)到1000ms之前這個(gè)定時(shí)器為null懈费，而到了規(guī)定時(shí)間執(zhí)行這個(gè)函數(shù)并再次把定時(shí)器清除计露。也就是說(shuō)當(dāng)?shù)谝淮斡|發(fā)事件，到達(dá)規(guī)定時(shí)間再執(zhí)行這個(gè)函數(shù)憎乙，執(zhí)行之后馬上清除定時(shí)器票罐，開(kāi)始新的循環(huán)，那么我們看到的效果就是泞边，滾動(dòng)之后沒(méi)有馬上打印该押，而是等待1000ms打印，有一個(gè)延遲的效果阵谚，并且這段時(shí)間滾動(dòng)事件不會(huì)執(zhí)行函數(shù)沈善。
單用時(shí)間戳或者定時(shí)器都有缺陷乡数，我們更希望第一次觸發(fā)馬上執(zhí)行函數(shù)，最后一次觸發(fā)也可以執(zhí)行一次事件處理函數(shù)
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now(); //設(shè)置開(kāi)始時(shí)間
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime); //剩余時(shí)間
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));
[圖片上傳失敗...(image-99da8f-1595924919704)]
在節(jié)流函數(shù)內(nèi)部使用開(kāi)始時(shí)間startTime闻牡、當(dāng)前時(shí)間curTime和剩余時(shí)間remaining净赴，當(dāng)剩余時(shí)間小于等于0意味著執(zhí)行處理函數(shù)，這樣保證第一次就能立即執(zhí)行函數(shù)并且每隔delay時(shí)間執(zhí)行一次罩润；如果還沒(méi)到時(shí)間玖翅，就會(huì)在remaining之后觸發(fā)，保證最后一次觸發(fā)事件也能執(zhí)行函數(shù)割以，如果在remaining時(shí)間內(nèi)又觸發(fā)了滾動(dòng)事件金度，那么會(huì)取消當(dāng)前的計(jì)數(shù)器并計(jì)算出新的remaing時(shí)間。通過(guò)時(shí)間戳和定時(shí)器的方法严沥，我們實(shí)現(xiàn)了第一次立即執(zhí)行猜极，最后一次也執(zhí)行，規(guī)定時(shí)間間隔執(zhí)行的效果消玄，可以靈活運(yùn)用在開(kāi)發(fā)中
PS：防抖和節(jié)流能有效減少瀏覽器引擎的損耗跟伏，防止出現(xiàn)頁(yè)面堵塞卡頓現(xiàn)象，應(yīng)該熟練掌握翩瓜。最后再次感謝原作者的總結(jié)受扳，熱心分享技術(shù)讓我們的生活變得更好
