快捷導(dǎo)航

vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請求的實(shí)現(xiàn)

更新時間：2023年03月05日 15:28:19 作者：kite吖

本文主要介紹了vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.通過控制 loading 來設(shè)置 loading，或者 disabled

剛開始直接給按鈕加上loading效果，即在請求前 loading為true, 在請求結(jié)束finally里loading置為false,以達(dá)到阻止重復(fù)點(diǎn)擊的問題，但部分請求短時間內(nèi)，用戶依然可以雙擊觸發(fā)多次請求。

2.使用Vue自定義指令

// 全局注冊自定義指令
Vue.directive("resetClick", {
  inserted(el, binding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        el.style.cursor = "not-allowed";
        setTimeout(() => {
          el.disabled = false;
          el.style.cursor = "pointer";
        }, binding.value || 1000);
      }
    });
  },
});
 
// 組件內(nèi)使用
<el-button type="primary" v-resetClick="1000" @click="confirm">
    確 定
</el-button>

3. 使用debounce函數(shù)

在工具類util.js文件中定義防抖函數(shù) (或直接使用第三方庫 throttle-debounce等)

// 防抖debounce代碼：
function debounce(fn, delay) {
  let timeout = null // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
  return function (e) {
    // 每當(dāng)用戶輸入的時候把前一個 setTimeout clear 掉
    clearTimeout(timeout)
    // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證interval 間隔內(nèi)如果時間持續(xù)觸發(fā)，就不會執(zhí)行 fn 函數(shù)
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
      timeout = null
    }, delay)
  }
}

vue組件中使用

<template>
  <div>
    <el-button type="primary" @click="handleClick">快速連續(xù)點(diǎn)擊</el-button>
  </div>
</template>
 
<script>
import { debounce } from '@/util/util.js'
 
export default {
  data() {
    return {}
  },
  methods: {
    handleClick: debounce(() => {
      console.log('刪除操作等業(yè)務(wù)邏輯')
    }, 500),
  },
}
</script>
 
<style></style>

以上兩種方式都存在問題

這兩種方式已經(jīng)基本上能滿足防重復(fù)點(diǎn)擊的需求，但實(shí)際測試時發(fā)現(xiàn)延時的時間不好控，如果延時時間短（<150ms）快速點(diǎn)擊還是會有幾率多次觸發(fā)事件。如果延時時間長(>600ms)，用戶點(diǎn)擊后會有個明顯的延時過程才能觸發(fā)事件，用戶體驗(yàn)就不太好。

首先明確下我們想要實(shí)現(xiàn)的效果。

用戶在按下按鈕的時候立即觸發(fā)點(diǎn)擊事件。
用戶在快速連續(xù)按下按鈕的時候只觸發(fā)第一次的點(diǎn)擊事件。
用戶不間斷瘋狂點(diǎn)擊按鈕（暴力測試），也只是立即觸發(fā)第一次的事件，在瘋狂點(diǎn)擊的過程中不會觸發(fā)事件，即使超時時間已經(jīng)過去。

4.最終解決方案lodash

lodash官方文檔——debounce

npm i lodash -S

組件中使用

<template>
  <div>
    <el-button type="primary" @click="handleClick">快速連續(xù)點(diǎn)擊</el-button>
  </div>
</template>
 
<script>
import { debounce } from 'lodash'
 
export default {
  data() {
    return {}
  },
  methods: {
    handleClick: debounce(
      () => {
        console.log('刪除操作等業(yè)務(wù)邏輯')
      },
      500,
      {
        leading: true, // 在延遲開始前立即調(diào)用事件
        trailing: false, // 在延時結(jié)束后不調(diào)用,保證事件只被觸發(fā)一次
      },
    ),
  },
}
</script>

到此這篇關(guān)于vue 禁止重復(fù)點(diǎn)擊發(fā)送多次請求的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 禁止重復(fù)點(diǎn)擊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: