站長資訊網(wǎng)
在vue中，防抖是指在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時；也就是說：當持續(xù)觸發(fā)某事件時，一定時間間隔內(nèi)沒有再觸發(fā)事件時，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間間隔到來之前，又一次觸發(fā)了事件，就重新開始延時。
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
談到vue項目的優(yōu)化，防抖節(jié)流真心需要了解一下，下面就來聊聊防抖。
防抖(debounce)
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時；
解釋：當持續(xù)觸發(fā)某事件時，一定時間間隔內(nèi)沒有再觸發(fā)事件時，事件處理函數(shù)才會執(zhí)行一次，如果設(shè)定的時間間隔到來之前，又一次觸發(fā)了事件，就重新開始延時。
通俗理解，就是我們在點擊請求或者點擊加載等過程中，只需要點擊一次，但由于請求慢，點擊了好多次，導(dǎo)致多次請求，防抖就是在點擊了好多次之后的最后一次才會請求。
案例1：
持續(xù)觸發(fā)scroll事件時，并不立即執(zhí)行handle函數(shù)，當1000毫秒內(nèi)沒有觸發(fā)scroll事件時，才會延時觸發(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的第二個參數(shù)實際上是debounce函數(shù)里return回的方法，let timeout = null 這行代碼只在addEventListener的時候執(zhí)行了一次 觸發(fā)事件的時候不會執(zhí)行，那么每次觸發(fā)scroll事件的時候都會清除上次的延時器同時記錄一個新的延時器，當scroll事件停止觸發(fā)后最后一次記錄的延時器不會被清除可以延時執(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ù)輸入的過程中，多次觸發(fā)keyup事件，定時器每次都會重新渲染，僅當輸入間隔超過（或等于）所設(shè)時間2秒時，num++才會執(zhí)行。
搭配鍵盤修飾符：（.enter為例）
<div id="app"> 輸入內(nèi)容：<input type="text" class="input" @keyup.enter="deb"/> <div> 輸入次數(shù)：{{num}}</div> </div>
這樣連續(xù)按回車后，也只會觸發(fā)一次 輸入 ，每次按回車間隔設(shè)置的兩秒，才會觸發(fā)一次。
所以，考慮到會出現(xiàn)連續(xù)點擊了提交按鈕，連續(xù)觸摸的情況，防抖是很有必要的。
當然，也有另外的解決方式，比如項目里用的是控制按鈕的方式，點擊保存，在請求接口返回200之前，按鈕禁止使用，這里就不會出現(xiàn)重復(fù)點擊了。
【相關(guān)視頻教程推薦：vue視頻教程、web前端入門】
