Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作

更新時(shí)間：2020年11月11日 11:47:47 作者：前端小迷弟

這篇文章主要介紹了Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

如果連續(xù)點(diǎn)擊提交按鈕，可能會(huì)重復(fù)提交數(shù)據(jù)，導(dǎo)致出錯(cuò)，解決的方法可以使用disabled限制點(diǎn)擊，感覺體驗(yàn)不是太好，所有給大家分享下面的方法

<el-button @click="throttle()">測(cè)試</el-button> 
export default {
 data(){
  return {
   lastTime:0 //默認(rèn)上一次點(diǎn)擊時(shí)間為0 
  }
 }
}

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

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

補(bǔ)充知識(shí)：解決vuex中module過多時(shí)，需一個(gè)個(gè)引入的問題

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

以下是解決方案

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

配置了這個(gè)后就無需一個(gè)個(gè)引入模塊了；

以上這篇Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

如何使用vue slot創(chuàng)建一個(gè)模態(tài)框的實(shí)例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個(gè)模態(tài)框,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05
Vue實(shí)現(xiàn)簡(jiǎn)單的留言板
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
Vue下拉選擇框Select組件使用詳解(一)
這篇文章主要為大家詳細(xì)介紹了Vue下拉選擇框Select組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù)，點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁，詳情頁可以添加并跳轉(zhuǎn)到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下
2022-10-10
JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2020-04-04
vue3監(jiān)聽路由的變化代碼示例
在vue項(xiàng)目中假使我們?cè)谕粋€(gè)路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽路由的變化的相關(guān)資料,需要的朋友可以參考下
2023-09-09
vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名
這篇文章主要介紹了vue項(xiàng)目中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ì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-03-03
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
使用vue-cli創(chuàng)建項(xiàng)目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項(xiàng)目的圖文教程，本文是針對(duì)完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下
2018-05-05