使一个方法在一定时间内只被触发一次，防止多次触发（Vue）

最新推荐文章于 2024-08-04 21:39:31 发布
最新推荐文章于 2024-08-04 21:39:31 发布
阅读量2k 收藏 4
点赞数 1
分类专栏： vue 文章标签： 函数防重复调用 计时器 JavaScript 防刷机制 异步控制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51751522/article/details/123605917
版权
  1. 定义一个变量flag
    在这里插入图片描述
  2. 编写一个方法（getcards_500）用来控制需要调用的（getcards），设定一定时间（这里是500毫秒）内不在触发getcards方法，用于防止多次触发
getcards_500(){
  let that=this;
  var timer;

  if (that.flag) {
    that.getcards(that.start)//调用需要触发的函数
  }
  that.flag = false;
  clearTimeout(timer);
  timer = setTimeout(()=>{that.flag = true}, 500);
},
weixin_51751522
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 点击一个按钮触发两个事件_vue事件点击穿透解决大法
weixin_39556064的博客
12-21 3613
最近在做项目的过程中遇到一个非常奇葩的bug，在h5页面点击一个按钮弹出弹窗，但是这个弹窗刚出现就会自动消失，导致屏幕出现闪动现象，关键这个bug还是偶现的。经过一番研究才发现是vue事件点击穿透引起的，而且弹窗一定要在300ms内出现才会引发这个bug，接下来分析具体原因：一，click与300ms延迟vue框架内置指令v-on:click有300ms的延迟响应，这是为了判断区分单击和双击。vu...
click vue 重复调用_Vue 防止短时间内连续点击后多次触发请求的操作
weixin_34005314的博客
12-24 3857
如果连续点击提交按钮，可能会重复提交数据，导致出错，解决的方法可以使用disabled限制点击，感觉体验不是太好，所有给大家分享下面的方法测试export default {data(){return {lastTime:0 //默认上一次点击时间为0}}}methods:{throttle(){//获取当前时间的时间戳let now = new Date().valueOf();//第一次点击i...
vue指令-约束用户在短时间内重复请求
潇湘子的博客
10-29 578
有时候用户在操作页面时，比如点击一次按钮请求较慢，loading一直显示在加载，那么，用户有可能不耐烦，可能会不断的点击按钮，这样就会不断的请求后端接口，不断地消耗网络流量，增加http请求次数,导致网页性能问题,那么我可以通过以下方式来限制或者约束这种操作。 1.// 新建avoidRepeatClick.js代码如下：全局注册指令 export default { install (Vue) { // 防止重复点击 Vue.directive('avoidRepeatClick',
Vue-事件修饰符-事件只触发一次
m0_73839298的博客
05-15 256
once什么是事件修饰符？
vue滚动到底部加载数据并且防止触发多次
baidu_41601299的博客
10-30 5615
源码Demo： <template> <div> <ul class="list"> <li v-for="(item,index) in listData" :key="index" :v-if="listData">{{item.album_title}}</li> </...
vue如何让一句代码只执行一次,如何仅触发一次vue方法，而不是每次都触发一次...
weixin_39789370的博客
02-22 1996
I'm handling a rotate even on change:export default {data: {rotate = 0},methods: {handleRotate () {this.rotate = this.rotate + this.getRotateAngle(e.clientX, e.clientY)}}}Right now, the second this.ro...
vue如何让一句代码只执行一次_javascript – 如何只触发一次vue方法,而不是每次都触发一次...
weixin_30599809的博客
01-17 3989
解决方式Vue方式：您可以使用$once,它只会监听一次事件.Listen for a custom event,but only once. The listener will be removed once it triggers for the first time.你只需要将@once添加到@change,如下所示：export default {//No Change here}检查演示...
多次重复点击，只触发一次（vue指令实现）
mischievous_boy的博客
09-08 7180
使用场景： 提交表单的时候，只有在表单成功提交之后，才能下一次提交，处于网络请求中的时候，不能够提交。 付款的时候，只能够付一次，同样处于网络请求中，不能够提交等等 优点（也算是吧）： 相对于使用防抖和节流的操作，防抖和节流会受到网络请求的快慢影响，如果网络请求过慢，而且两次点击的时间超过防抖和节流预设的时间，还会触发多次的。本方式使用捕捉promise中resolve和reject的方式，更加精确在什么时候可以触发禁止点击和放开点击 相对于使用变量控制，不需要额外的..
Vue 2秒钟点击多次，只触发一次事件
宁夏前端工程师，马卫斌，wx：1457508895
05-18 6468
Vue 2秒钟点击多次，只触发一次事件 在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。 需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。 思路： 定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。 main.js中注册 Vue.directive('debounce', { inserted(el, binding, vno
Vue中防止短时间内连续点击后多次触发请求（js节流思想）
Wline
04-30 6598
本人处于前端小白阶段，在做项目的产品模块的时候有时会连续点击提交按钮，导致添加多个重复的产品，刚开始是用disabled限制点击，体验不是太好，偶然在b站上发现一个Js节流视频，但是看得有点云里雾里，所以根据节流的思想自己写了个比较适合我的方法。 <el-button @click="throttle()">测试节流</el-button> export defaul...
vue中eventbus被多次触发以及踩过的坑
08-28
主要介绍了vue中eventbus被多次触发以及踩过的坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中axios防止多次触发终止多次请求的示例代码（防抖）
10-15
主要介绍了vue中axios防止多次触发终止多次请求的实现方法（防抖）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JS中mouseover和mouseout多次触发问题如何解决
10-22
主要介绍了JS中mouseover和mouseout多次触发问题如何解决的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
使用 Vue.js 构建大屏可视化系统
qq_42072014的博客
08-04 622
通过上述步骤，你已经具备了构建一个完整的 Vue.js 大屏可视化系统的知识。根据具体需求，你还可以添加更多高级功能，如动态加载图表数据、实时数据流等。
【Vue3】组件通信之provide&inject
又言又语
08-04 537
本文介绍 Vue3 中如何使用provide和inject实现父组件向子组件的子组件传数据，即向其孙子组件传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件向子组件的子组件传数据，即向孙子组件传数据$attrsproviderinject任意组件间传数据mittPinia使用provide和inject实现跨组件传数据与$attrs。
Vue的学习（二）
最新发布
weixin_65450681的博客
08-04 747
数据发生变化会影响到视图 而v-bind绑定的数据视图变化 而数据不受影响 这就是单向的数据v-model 双向数据绑定 数据改变则视图发生变化 视图改变 则数据响应发生变化代码展示。
Vue.js 循环语句
wjs2024的博客
08-04 113
Vue.js 是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。在Vue.js中，循环语句用于重复渲染元素或组件，这通常与数组或对象数据结合使用。本文将详细介绍Vue.js中的循环语句，包括基本用法、高级特性以及最佳实践。
vue知识
qq_16570607的博客
08-04 120
Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）。vue3:数据和⽅法都定义在setup中，并统⼀进⾏return{}。
vue中实现同一个方法在1秒中只执行一次
06-10
在Vue中实现同一个方法在1秒中只执行一次可以使用防抖或节流的方式。 1. 防抖：在指定的时间内，如果事件被触发多次，只执行最后一次触发的事件。 可以使用lodash库中的debounce方法来实现防抖： ```javascript import { debounce } from 'lodash' export default { data() { return { inputValue: '' } }, methods: { handleInput: debounce(function() { console.log(this.inputValue) }, 1000) } } ``` 2. 节流：在指定的时间内，事件被触发多次，每隔指定时间执行一次事件。 可以自己实现一个简单的节流函数： ```javascript export default { data() { return { inputValue: '' } }, methods: { handleInput() { throttle(() => { console.log(this.inputValue) }, 1000) } } } function throttle(fn, delay) { let timer = null return function() { if (!timer) { timer = setTimeout(() => { fn.apply(this, arguments) timer = null }, delay) } } } ``` 以上两种方法都可以实现同一个方法在1秒中只执行一次，具体使用哪种方式取决于需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值