欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)過程

 更新時(shí)間：2023年08月22日 14:14:01   作者：全棧狂神  
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中按鈕防抖處理實(shí)現(xiàn)的相關(guān)資料,在項(xiàng)目開發(fā)中相必大家時(shí)常會(huì)遇到按鈕重復(fù)點(diǎn)擊后引起事件重復(fù)提交的問題,需要的朋友可以參考下

防抖的概念和意義

1. 概念

連續(xù)點(diǎn)擊按鈕時(shí)，按鈕的點(diǎn)擊事件只會(huì)觸發(fā)觸發(fā)一次，結(jié)束連續(xù)點(diǎn)擊后，再次點(diǎn)擊按鈕時(shí)才會(huì)觸發(fā)按鈕的點(diǎn)擊事件

2. 意義

按鈕防抖是針對(duì)按鈕操作時(shí)，用戶連續(xù)點(diǎn)擊按鈕時(shí)也會(huì)每次觸發(fā)按鈕的綁定的點(diǎn)擊事件，這會(huì)造成多次無效的觸發(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 // 防抖時(shí)間
    if (!throttleTime) { // 用戶若不設(shè)置防抖時(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. 注冊(cè)指令
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論