JAVAScript 的節(jié)流和防抖已經(jīng)是老生暢談的問題了，對(duì)于前端行業(yè)技術(shù)大牛來講不過是小菜一碟，而對(duì)于絕大多數(shù)前端小白或初級(jí)工程師，絕對(duì)是必備的知識(shí)，值得學(xué)習(xí)。
接下來小郭就帶大家一起學(xué)習(xí)“防抖”與“節(jié)流”。
防抖
不知道大家第一次看到這個(gè)詞會(huì)怎樣理解。在我第一次接觸到這個(gè)概念時(shí)，直接根據(jù)字面去理解，天真的以為是JS函數(shù)有抖動(dòng)。
其實(shí)是為了防止一個(gè)函數(shù)在段時(shí)間內(nèi)瘋狂執(zhí)行。
那它會(huì)產(chǎn)生在哪些場(chǎng)景下呢？例如：
- 搜索框 input事件；
- 鼠標(biāo)移動(dòng) mousemove事件；
- 視窗大小變化 resize事件；
當(dāng)然還有很多其他的一些實(shí)際場(chǎng)景。再來研究一下它的防抖的原理。
原理：不希望某個(gè)事件在短時(shí)間內(nèi)瘋狂觸發(fā)，影響性能，所以我們?cè)O(shè)置一個(gè)定時(shí)器，讓這個(gè)事件在一定時(shí)間延遲后再執(zhí)行，如果這個(gè)延遲中間中途這個(gè)事件又觸發(fā)了，那就把上次事件綁定的定時(shí)器取消，避免了上次事件執(zhí)行，然后重新設(shè)置一個(gè)定時(shí)器綁定在當(dāng)前事件上。
以上是我個(gè)人對(duì)防抖的理解。比如我們改變視窗大小的時(shí)候，我們更希望在視窗大小固定的時(shí)候再去執(zhí)行某個(gè)方法。
現(xiàn)在，我們需要一個(gè)變量指向定時(shí)器，而且這個(gè)變量應(yīng)該是‘全局變量’，可以用閉包實(shí)現(xiàn)這個(gè)‘全局變量’。
// 防抖核心方法function debounce(fn, delay) { var timer = 0 var _delay = delay || 800 return function() { if(timer) { clearTimeout(timer) } timer = setTimeout(() => { fn() }, _delay); }}
拿到代碼馬上安排，以視窗大小改變來舉例
- 未安排防抖
function resize() { console.log('視窗改變時(shí)需要執(zhí)行些什么...')}window.addEventListener('resize',resize)
效果：方法多次觸發(fā)
未防抖
- 安排防抖
function debounce(fn, delay) { var timer = 0 var _delay = delay || 800 return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn() }, _delay); }}function resize() { console.log('視窗改變時(shí)需要執(zhí)行些什么...')}window.addEventListener('resize', debounce(resize, 1000))
效果：方法只在需要的時(shí)候觸發(fā)
防抖
對(duì)比結(jié)果一目了然，如果這樣的情況發(fā)生在請(qǐng)求接口的場(chǎng)景下，防抖必然會(huì)減少服務(wù)器的壓力。這何嘗不是一種關(guān)鍵的性能優(yōu)化。
節(jié)流
節(jié)流，目的很明確，就是節(jié)省流量。如果一個(gè)方法在短時(shí)間內(nèi)瘋狂執(zhí)行，我們希望它每隔一段時(shí)間執(zhí)行。如此是不是可以節(jié)省流量呢？
節(jié)流主要使用在懶加載時(shí)請(qǐng)求數(shù)據(jù)，在頻繁滑動(dòng)的時(shí)候，不會(huì)瘋狂請(qǐng)求接口，減小對(duì)服務(wù)器的壓力
// 節(jié)流核心代碼function throttle(fn, delay = 800) { var timer = 0 var _delay = delay return function(){ if(!timer) { setTimeout(() => { fn() timer = 0 }, _delay); } }}
依然是以視窗大小改變舉例：
function resize(n) { return function () { console.log('視窗改變時(shí)需要執(zhí)行些什么...' + n++) }}window.addEventListener('resize', throttle(resize(1)))
效果：方法被“限量”執(zhí)行，不會(huì)瘋狂執(zhí)行
節(jié)流
看到現(xiàn)在，大家應(yīng)該對(duì)“防抖”與“節(jié)流”已經(jīng)掌握，關(guān)鍵還是要應(yīng)用到實(shí)際的項(xiàng)目中。為了提升大家的代碼性能，一定要看到最后。
