站長(zhǎng)資訊網(wǎng)
在vue中，防抖是指在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)；也就是說(shuō)：當(dāng)持續(xù)觸發(fā)某事件時(shí)，一定時(shí)間間隔內(nèi)沒(méi)有再觸發(fā)事件時(shí)，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間間隔到來(lái)之前，又一次觸發(fā)了事件，就重新開(kāi)始延時(shí)。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
談到vue項(xiàng)目的優(yōu)化，防抖節(jié)流真心需要了解一下，下面就來(lái)聊聊防抖。
防抖(debounce)
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)；
解釋：當(dāng)持續(xù)觸發(fā)某事件時(shí)，一定時(shí)間間隔內(nèi)沒(méi)有再觸發(fā)事件時(shí)，事件處理函數(shù)才會(huì)執(zhí)行一次，如果設(shè)定的時(shí)間間隔到來(lái)之前，又一次觸發(fā)了事件，就重新開(kāi)始延時(shí)。
通俗理解，就是我們?cè)邳c(diǎn)擊請(qǐng)求或者點(diǎn)擊加載等過(guò)程中，只需要點(diǎn)擊一次，但由于請(qǐng)求慢，點(diǎn)擊了好多次，導(dǎo)致多次請(qǐng)求，防抖就是在點(diǎn)擊了好多次之后的最后一次才會(huì)請(qǐng)求。
案例1：
持續(xù)觸發(fā)scroll事件時(shí)，并不立即執(zhí)行handle函數(shù)，當(dāng)1000毫秒內(nèi)沒(méi)有觸發(fā)scroll事件時(shí)，才會(huì)延時(shí)觸發(fā)一次handle函數(shù)。
function debounce(fn, wait) { let timeout = null return function() { if(timeout !== null) clearTimeout(timeout) timeout = setTimeout(fn, wait); } } function handle() { console.log(Math.random()) } window.addEventListener('scroll', debounce(handle, 1000))
addEventListener的第二個(gè)參數(shù)實(shí)際上是debounce函數(shù)里return回的方法，let timeout = null 這行代碼只在addEventListener的時(shí)候執(zhí)行了一次 觸發(fā)事件的時(shí)候不會(huì)執(zhí)行，那么每次觸發(fā)scroll事件的時(shí)候都會(huì)清除上次的延時(shí)器同時(shí)記錄一個(gè)新的延時(shí)器，當(dāng)scroll事件停止觸發(fā)后最后一次記錄的延時(shí)器不會(huì)被清除可以延時(shí)執(zhí)行，這是debounce函數(shù)的原理
案例2：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> 輸入內(nèi)容：<input type="text" @keyup="deb"/> <div> 輸入次數(shù)：{{num}}</div> </div> <script> let time var app=new Vue({ el:'#app', data:{ num:0, }, methods:{ deb: function () { let that = this if (time) { clearTimeout(time) } time = setTimeout(function () { that.num++ console.log('輸入了'+that.num+'次') time = undefined; }, 2000) } } }) </script> </body> </html>
效果圖：（輸入一次文字2秒后執(zhí)行，多次輸入，還是執(zhí)行一次，輸入次數(shù)只加1）：
全局定義的time是undefind , 在連續(xù)輸入的過(guò)程中，多次觸發(fā)keyup事件，定時(shí)器每次都會(huì)重新渲染，僅當(dāng)輸入間隔超過(guò)（或等于）所設(shè)時(shí)間2秒時(shí)，num++才會(huì)執(zhí)行。
搭配鍵盤修飾符：（.enter為例）
<div id="app"> 輸入內(nèi)容：<input type="text" class="input" @keyup.enter="deb"/> <div> 輸入次數(shù)：{{num}}</div> </div>
這樣連續(xù)按回車后，也只會(huì)觸發(fā)一次 輸入 ，每次按回車間隔設(shè)置的兩秒，才會(huì)觸發(fā)一次。
所以，考慮到會(huì)出現(xiàn)連續(xù)點(diǎn)擊了提交按鈕，連續(xù)觸摸的情況，防抖是很有必要的。
當(dāng)然，也有另外的解決方式，比如項(xiàng)目里用的是控制按鈕的方式，點(diǎn)擊保存，在請(qǐng)求接口返回200之前，按鈕禁止使用，這里就不會(huì)出現(xiàn)重復(fù)點(diǎn)擊了。
【相關(guān)視頻教程推薦：vue視頻教程、web前端入門】
