溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue防抖實例分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
在vue中，防抖是指在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時；也就是說：當持續觸發某事件時，一定時間間隔內沒有再觸發事件時，事件處理函數才會執行一次，如果設定的時間間隔到來之前，又一次觸發了事件，就重新開始延時。
本教程操作環境：windows7系統、vue3版，DELL G3電腦。
防抖(debounce)
在事件被觸發n秒后再執行回調，如果在這n秒內又被觸發，則重新計時；
解釋：當持續觸發某事件時，一定時間間隔內沒有再觸發事件時，事件處理函數才會執行一次，如果設定的時間間隔到來之前，又一次觸發了事件，就重新開始延時。
通俗理解，就是我們在點擊請求或者點擊加載等過程中，只需要點擊一次，但由于請求慢，點擊了好多次，導致多次請求，防抖就是在點擊了好多次之后的最后一次才會請求。
案例1：
持續觸發scroll事件時，并不立即執行handle函數，當1000毫秒內沒有觸發scroll事件時，才會延時觸發一次handle函數。
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的第二個參數實際上是debounce函數里return回的方法，let timeout = null 這行代碼只在addEventListener的時候執行了一次 觸發事件的時候不會執行，那么每次觸發scroll事件的時候都會清除上次的延時器同時記錄一個新的延時器，當scroll事件停止觸發后最后一次記錄的延時器不會被清除可以延時執行，這是debounce函數的原理
案例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"> 輸入內容：<input type="text" @keyup="deb"/> <div> 輸入次數：{{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秒后執行，多次輸入，還是執行一次，輸入次數只加1）：
全局定義的time是undefind , 在連續輸入的過程中，多次觸發keyup事件，定時器每次都會重新渲染，僅當輸入間隔超過（或等于）所設時間2秒時，num++才會執行。
搭配鍵盤修飾符：（.enter為例）
<div id="app">
輸入內容：<input type="text" class="input" @keyup.enter="deb"/>
<div> 輸入次數：{{num}}</div>
</div>這樣連續按回車后，也只會觸發一次 輸入 ，每次按回車間隔設置的兩秒，才會觸發一次。
所以，考慮到會出現連續點擊了提交按鈕，連續觸摸的情況，防抖是很有必要的。
當然，也有另外的解決方式，比如項目里用的是控制按鈕的方式，點擊保存，在請求接口返回200之前，按鈕禁止使用，這里就不會出現重復點擊了。
“vue防抖實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
