vue禁止重復點擊發送多次請求如何實現

本篇內容介紹了“vue禁止重復點擊發送多次請求如何實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

某些情況下，為了阻止用戶短時間內重復點擊某個按鈕，導致前端向后端重復發送多次請求。

1.通過控制 loading 來設置 loading，或者 disabled

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

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);
      }
    });
  },
});
 
// 組件內使用
<el-button type="primary" v-resetClick="1000" @click="confirm">
    確 定
</el-button>

3. 使用debounce函數

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

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

vue組件中使用

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

以上兩種方式都存在問題

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

首先明確下我們想要實現的效果。

• 用戶在按下按鈕的時候立即觸發點擊事件。

• 用戶在快速連續按下按鈕的時候只觸發第一次的點擊事件。

• 用戶不間斷瘋狂點擊按鈕（暴力測試），也只是立即觸發第一次的事件，在瘋狂點擊的過程中不會觸發事件，即使超時時間已經過去。

4.最終解決方案lodash

lodash官方文檔&mdash;&mdash;debounce

npm i lodash -S

組件中使用

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

“vue禁止重復點擊發送多次請求如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！