Vue 防止短时间内连续点击后多次触发请求的操作


Posted in Javascript onNovember 11, 2020

如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用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 防止短时间内连续点击后多次触发请求的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 #Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 #Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
浅谈js闭包理解
2019/04/01 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python代码 输入数字使其反向输出的方法
2018/12/22 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
Foreo国际站:Foreo International
2018/10/29 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
陈欧的广告词
2014/03/18 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
升学宴来宾致辞
2015/07/27 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python