Vue 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作
更新時間：2020年11月11日 11:47:47 作者：前端小迷弟
這篇文章主要介紹了Vue 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如果連續(xù)點擊提交按鈕，可能會重復(fù)提交數(shù)據(jù)，導(dǎo)致出錯，解決的方法可以使用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('觸發(fā)事件');
this.lastTime = now;
}else{
if((now-this.lastTime) > 2000){
//重置上一次點擊時間，2000是我自己設(shè)置的2秒間隔，根據(jù)自己的需要更改
this.lastTime = now;
console.log('間隔大于2秒，觸發(fā)方法');
//添加自己要調(diào)用的方法
}else{
console.log('不觸發(fā)');
}
}
},
}
這種方法雖然很好，但是遇到請求超時的情況可能不是太好處理（網(wǎng)絡(luò)原因、數(shù)據(jù)太大）?？紤]通過后端是否返回res來控制。方法還有待提高！僅供參考~
補充知識：解決vuex中module過多時，需一個個引入的問題
在項目開發(fā)中，使用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 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用vue slot創(chuàng)建一個模態(tài)框的實例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個模態(tài)框,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的留言板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù)，點擊跳轉(zhuǎn)到對應(yīng)的詳情頁，詳情頁可以添加并跳轉(zhuǎn)到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下2022-10-10
JavaScript實現(xiàn)簡單的圖片切換功能(實例代碼)
這篇文章主要介紹了JavaScript實現(xiàn)簡單的圖片切換功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-04-04
在vue項目中假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽路由的變化的相關(guān)資料,需要的朋友可以參考下2023-09-09
vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名
這篇文章主要介紹了vue項目中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名,使用npm run build --xxx，根據(jù)傳遞參數(shù)xxx來判定不同的環(huán)境，給出不同的域名配置，具體內(nèi)容詳情大家參考下本文2018-03-03
npm install卡在“sill idealTree buildDeps“問題的兩種解
本文主要介紹了npm install卡在“sill idealTree buildDeps“問題的兩種解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-03-03
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項目的圖文教程，本文是針對完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下2018-05-05