vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)過程
更新時間：2023年08月22日 14:14:01 作者：全?？裆?
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的相關(guān)資料,在項(xiàng)目開發(fā)中相必大家時常會遇到按鈕重復(fù)點(diǎn)擊后引起事件重復(fù)提交的問題,需要的朋友可以參考下
防抖的概念和意義
1. 概念
連續(xù)點(diǎn)擊按鈕時，按鈕的點(diǎn)擊事件只會觸發(fā)觸發(fā)一次，結(jié)束連續(xù)點(diǎn)擊后，再次點(diǎn)擊按鈕時才會觸發(fā)按鈕的點(diǎn)擊事件
2. 意義
按鈕防抖是針對按鈕操作時，用戶連續(xù)點(diǎn)擊按鈕時也會每次觸發(fā)按鈕的綁定的點(diǎn)擊事件，這會造成多次無效的觸發(fā)
實(shí)現(xiàn)過程
1. 通過定義指令方式
通過定義指令方式實(shí)現(xiàn)防抖限制，可為需要防抖的按鈕添加防抖的指令即可實(shí)現(xiàn)按鈕的防抖操作限制，使用方式簡潔
2. 實(shí)現(xiàn)代碼
// 點(diǎn)擊防抖
const throttle = {
bind: (el, binding) => {
let throttleTime = binding.value // 防抖時間
if (!throttleTime) { // 用戶若不設(shè)置防抖時間，則默認(rèn)1s
throttleTime = 1000
}
let timer
let disable = false
el.addEventListener('click', event => {
if (timer) {
clearTimeout(timer)
}
if (!disable) { // 第一次執(zhí)行(一點(diǎn)擊觸發(fā)當(dāng)前事件)
disable = true
} else {
event && event.stopImmediatePropagation()
}
timer = setTimeout(() => {
timer = null
disable = false
}, throttleTime)
}, true)
}
}3. 使用案例代碼
// 1. 注冊指令
Vue.directive('throttle', throttle);
// 2. 按鈕添加防抖指令
// 2.1 普通按鈕或dom節(jié)點(diǎn)也可添加指令實(shí)現(xiàn)防抖顯示
// eg1:
<button v-throttle="2000">按鈕防抖</button>
// 2.2 element組件按鈕實(shí)現(xiàn)防抖
<el-button v-throttle="2000">按鈕防抖</el-button>總結(jié)
到此這篇關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue項(xiàng)目按鈕防抖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在前后端分離架構(gòu)中,vue項(xiàng)目通常需要部署到nginx服務(wù)器以實(shí)現(xiàn)生產(chǎn)環(huán)境運(yùn)行,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01
Vue.js實(shí)現(xiàn)按鈕的動態(tài)綁定效果及實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了Vue.js實(shí)現(xiàn)按鈕的動態(tài)綁定效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
這篇文章主要介紹了Vue.js組件高級特性,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
Vue多布局模式實(shí)現(xiàn)方法詳細(xì)講解
這篇文章主要介紹了Vue多布局模式實(shí)現(xiàn)方法，多布局模式可以根據(jù)用戶角色所在場景切換頁面布局，是非常常見的基礎(chǔ)功能，感興趣的同學(xué)可以參考下文2023-05-05
element tree樹形組件回顯數(shù)據(jù)問題解決
本文主要介紹了element tree樹形組件回顯數(shù)據(jù)問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue自定義組件實(shí)現(xiàn)?v-model?的幾種方式
在?Vue?中,v-model?是一個常用的指令,用于實(shí)現(xiàn)表單元素和組件之間的雙向綁定,當(dāng)我們使用原生的表單元素時,直接使用?v-model?是很方便的,本文給大家介紹了Vue自定義組件實(shí)現(xiàn)?v-model?的幾種方式,需要的朋友可以參考下2024-02-02
本篇文章主要介紹了vue如何獲取點(diǎn)擊事件源的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vuex的actions屬性的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04