亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2020年11月11日 11:47:47   作者：前端小迷弟  
這篇文章主要介紹了Vue 防止短時間內(nèi)連續(xù)點擊后多次觸發(fā)請求的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如果連續(xù)點擊提交按鈕，可能會重復提交數(shù)據(jù)，導致出錯，解決的方法可以使用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是我自己設置的2秒間隔，根據(jù)自己的需要更改
    this.lastTime = now;
    console.log('間隔大于2秒，觸發(fā)方法');
    //添加自己要調(diào)用的方法
   }else{
    console.log('不觸發(fā)');
   }
  }
  },
}

這種方法雖然很好，但是遇到請求超時的情況可能不是太好處理（網(wǎng)絡原因、數(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論