快捷導(dǎo)航

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 //默認(rèn)上一次點擊時間為0 
  }
 }
}

methods:{
 throttle(){
  //獲取當(dāng)前時間的時間戳
  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)框,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-05-05
Vue實現(xiàn)簡單的留言板
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單的留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
Vue下拉選擇框Select組件使用詳解(一)
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
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)簡單的圖片切換功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2020-04-04
vue3監(jiān)聽路由的變化代碼示例
在vue項目中假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(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“問題的兩種解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
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