JavaScript 的節(jié)流和防抖已經(jīng)是老生暢談的問題了，對于前端行業(yè)技術(shù)大牛來講不過是小菜一碟，而對于絕大多數(shù)前端小白或初級工程師，絕對是必備的知識，值得學(xué)習(xí)。

接下來小郭就帶大家一起學(xué)習(xí)“防抖”與“節(jié)流”。

防抖

不知道大家第一次看到這個詞會怎樣理解。在我第一次接觸到這個概念時，直接根據(jù)字面去理解，天真的以為是JS函數(shù)有抖動。

其實是為了防止一個函數(shù)在段時間內(nèi)瘋狂執(zhí)行。

那它會產(chǎn)生在哪些場景下呢？例如：

搜索框 input事件；

鼠標(biāo)移動 mousemove事件；

視窗大小變化 resize事件；

當(dāng)然還有很多其他的一些實際場景。再來研究一下它的防抖的原理。

原理：不希望某個事件在短時間內(nèi)瘋狂觸發(fā)，影響性能，所以我們設(shè)置一個定時器，讓這個事件在一定時間延遲后再執(zhí)行，如果這個延遲中間中途這個事件又觸發(fā)了，那就把上次事件綁定的定時器取消，避免了上次事件執(zhí)行，然后重新設(shè)置一個定時器綁定在當(dāng)前事件上。

以上是我個人對防抖的理解。比如我們改變視窗大小的時候，我們更希望在視窗大小固定的時候再去執(zhí)行某個方法。

現(xiàn)在，我們需要一個變量指向定時器，而且這個變量應(yīng)該是‘全局變量’，可以用閉包實現(xiàn)這個‘全局變量’。

// 防抖核心方法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('視窗改變時需要執(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('視窗改變時需要執(zhí)行些什么...')}window.addEventListener('resize', debounce(resize, 1000))

效果：方法只在需要的時候觸發(fā)

防抖

對比結(jié)果一目了然，如果這樣的情況發(fā)生在請求接口的場景下，防抖必然會減少服務(wù)器的壓力。這何嘗不是一種關(guān)鍵的性能優(yōu)化。

節(jié)流

節(jié)流，目的很明確，就是節(jié)省流量。如果一個方法在短時間內(nèi)瘋狂執(zhí)行，我們希望它每隔一段時間執(zhí)行。如此是不是可以節(jié)省流量呢？

節(jié)流主要使用在懶加載時請求數(shù)據(jù)，在頻繁滑動的時候，不會瘋狂請求接口，減小對服務(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('視窗改變時需要執(zhí)行些什么...' + n++) }}window.addEventListener('resize', throttle(resize(1)))

效果：方法被“限量”執(zhí)行，不會瘋狂執(zhí)行

節(jié)流

看到現(xiàn)在，大家應(yīng)該對“防抖”與“節(jié)流”已經(jīng)掌握，關(guān)鍵還是要應(yīng)用到實際的項目中。為了提升大家的代碼性能，一定要看到最后。

有任何問題歡迎在下方留言或私信我，想了解更多前端知識關(guān)注公眾號“一郭鮮”，小郭等著你

總結(jié)

以上是生活随笔為你收集整理的vue防抖和节流是什么_JavaScript防抖与节流，你知道多少？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。