如果連續點擊提交按鈕，可能會重復提交數據，導致出錯，解決的方法可以使用disabled限制點擊，感覺體驗不是太好，所有給大家分享下面的方法

<el-button @click='throttle()'>測試</el-button> export default { data(){ return { lastTime:0 //默認上一次點擊時間為0 } }}

methods:{ throttle(){ //獲取當前時間的時間戳 let now = new Date().valueOf(); //第一次點擊 if(this.lastTime == 0){ console.log(’觸發事件’); this.lastTime = now; }else{ if((now-this.lastTime) > 2000){ //重置上一次點擊時間，2000是我自己設置的2秒間隔，根據自己的需要更改 this.lastTime = now; console.log(’間隔大于2秒，觸發方法’); //添加自己要調用的方法 }else{ console.log(’不觸發’); } } },}

這種方法雖然很好，但是遇到請求超時的情況可能不是太好處理（網絡原因、數據太大）?？紤]通過后端是否返回res來控制。方法還有待提高！僅供參考~

補充知識：解決vuex中module過多時，需一個個引入的問題

在項目開發中，使用vuex，如果項目過大，vuex就需要模塊化，但是如果module分的過多，我們就需要在store的index.js中一個個引入，這樣未免太麻煩，所以webpack出來了個配置，可以解決這個問題，無需多次引入，懶癌患者福音，

以下是解決方案

import Vue from ’vue’import Vuex from ’vuex’import getters from ’./getters’Vue.use(Vuex)const modulesFiles = require.context(’./modules’, true, /.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => { const moduleName = modulePath.replace(/^./(.*).w+$/, ’$1’) const value = modulesFiles(modulePath) modules[moduleName] = value.default return modules}, {})const store = new Vuex.Store({ modules, getters})export default store

配置了這個后就無需一個個引入模塊了；

以上這篇Vue 防止短時間內連續點擊后多次觸發請求的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。