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 相关文章推荐
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
js opener的使用详解
Jan 11 Javascript
使用js实现数据格式化
Dec 03 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
深入详解JS函数的柯里化
Jun 09 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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
php源码的使用方法讲解
2019/09/26 PHP
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
微信小程序websocket实现聊天功能
2020/03/30 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python爬取读者并制作成PDF
2015/03/10 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
python str字符串转uuid实例
2020/03/03 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
班组长安全工作职责
2014/07/15 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python