如何在多次触发事件时只执行一次？

最新推荐文章于 2023-07-27 15:58:30 发布
最新推荐文章于 2023-07-27 15:58:30 发布
阅读量1.4k 收藏
点赞数
文章标签： java javascript python ViewUI
原文链接：http://www.cnblogs.com/cmy1996/p/9136615.html
版权

 

之前在写滚轮事件时曾经有想过如何让滚轮滑动一次只执行一次事件，而查资料时问题却没有好好表述，把这个问题搁置了一段时间。

前几天遇到了一个题目，就是窗口多次调整后只允许触发一次事件，且延迟一段时间执行，当时只想到了setTimeout。

回来之后查阅网上的资料，终于解谜惑。

只需要在事件开头加上clearTimeout即可，每次滑动时都清除排队执行的前面等候事件，以最后一次添加的事件为主。

 

 

 

 

转载于:https://www.cnblogs.com/cmy1996/p/9136615.html

Vue - 详细完美解决 ElementUI MessageBox “多次“ 弹框问题，让其无论执行多少次都只弹出来一次（常见于请求拦截器多次触发弹框，导致弹出来很多个）详细示例代码，保证完美解决！
王佳斌
05-09 6638
vue 如何防止 ElementUI MessageBox多次弹框，vue element弹框弹出来很多次怎么办，element vue MessageBox 解决执行多次后出现多次弹框的问题，elementUI如何阻止MessageBox多次弹出来，vue+element 解决多个请求同时报错,弹出多个消息框message，饿了么组件库MessageBox 弹框频繁弹出解决方法，vue调用MessageBox出现多次弹框，vue element MessageBox 怎么只弹出一次，vue之axios请求
iOS解决按钮短时间内多次点击只触发一次事件方法（开始写博客）
reasonable_boy的博客
07-04 9198
在上家公司做项目的时候，做了个60秒获取验证码的功能，当时做了个定时器，按钮触发定时器，逻辑来讲都是没问题的，但是实际操作的时候，恶意的在短时间内多次点击那个获取验证码按钮，按钮的点击事件被调用了多次，定时器从而也调用多次，本来一秒减一的事件变成了一秒减多，并且减到0后继续调用方法，直到响应点击次数调用完，这完全不符合我们的心意。 时隔2月，我在新公司工作了，回头来看这个问题，为了解决这个问
如何在多次触发事件时只执行一次？（函数防抖）
aisiqi5873的博客
11-20 1237
如何让滚轮滑动一次只执行一次事件。 同样的问题，就是窗口多次调整后只允许触发一次事件，且延迟一段时间执行，如何解决。 只需要在事件开头加上clearTimeout即可，每次滑动时都清除排队执行的前面等候事件，以最后一次添加的事件为主。 var scrollEle = document.getElementById("inner"); var time; ...
函数多次调用只执行一次
m0_56274171的博客
04-08 699
高阶/闭包 使用场景: 多次支付只付一次 function once(fn) { let done = false return function (...args) { if (done) return done = true return fn(...args) } } const fn = function (rmb) { console.log(`需要支付${rmb}元`); } const pay = once(
防抖函数，解决短时间内多次触发同一事件时只执行一次。
是大林的林吖-博客
09-10 860
防抖函数 在utils里，debounce.js function debounce(fun, delay) { var timer = null; return function() { var taht = this; // 注意 this 指向 var args = arguments; // arguments中存着e if (timer) clearTi
实现js连续点击事件但最终只触发一次
weixin_43240792的博客
09-02 3157
(1) //声明两个变量 var lastTime,num; function lockClick() { //获取当前毫秒数 var nowTime = new Date(); if (lastTime == undefined || Math.round(nowTime.getTime() - lastTime.getTim...
防抖函数debounce规定时间内多次点击只触发一次
m0_48971013的博客
11-08 448
防抖函数debounce规定时间内多次点击只触发一次
android 连续点击只执行最后一次,javascript防抖解决方法(多次触发事件后，事件处理函数只执行一次)...
weixin_42498892的博客
05-26 1685
为了完整阅读体验，欢迎移步到我的博客原文。防抖(去抖)，以及节流(分流)在日常开发中可能用的不多，但在特定场景，却十分有用。本文主要讨论防抖，镜像文章：节流 - 理解，实践与实现。分开讨论防抖和节流，主要是为了让一些还不太了解防抖节流的读者能够有针对性地，逐一掌握它们。防抖有两种模式(容易让人迷惑)：延时执行和直接执行。后续详细讨论。防抖还有一个关键点是如果用代码实现。本文以循序渐进地方式，先以实...
html对话框鼠标事件只触发一次,JS中mouseover和mouseout多次触发问题如何解决
weixin_36216860的博客
06-10 1508
问题描述我希望当鼠标移动到id1上的时候，id2显示，当鼠标离开id1的时候，id2显示。问题如下：1.当鼠标从id1上移动到id2上的时候，id由有显示变为不显示，然后变为显示2.当鼠标从id2上移动到id1上的时候， id2有显示变为不显示，然后变为显示我希望的是当鼠标在id1或者id2上移动的时候，id2一直显示，不发生变化。$("#id1").mouseover(function(){$(...
iScroll中事件点击触发两次解决方案
11-26
而在实际操作中，先执行了touchend，然后再执行了一次onclick的相关函数。这样就形成了头疼的一次点击两次触发。这本来就一个不是问题的问题。之所以说这是个问题，是因为这样是我们不得不去看一看iScroll的源代码。...
C#程序只执行一次的写法
weixin_42609581的博客
07-10 1559
/此处你要执行的东西。//此处你要执行的东西。
多次重复点击，只触发一次（vue指令实现）
mischievous_boy的博客
09-08 7386
使用场景： 提交表单的时候，只有在表单成功提交之后，才能下一次提交，处于网络请求中的时候，不能够提交。 付款的时候，只能够付一次，同样处于网络请求中，不能够提交等等 优点（也算是吧）： 相对于使用防抖和节流的操作，防抖和节流会受到网络请求的快慢影响，如果网络请求过慢，而且两次点击的时间超过防抖和节流预设的时间，还会触发多次的。本方式使用捕捉promise中resolve和reject的方式，更加精确在什么时候可以触发禁止点击和放开点击 相对于使用变量控制，不需要额外的..
多次触发只执行最后一次/第一次（防抖、节流）
weixin_46382390的博客
09-27 5734
多次触发只执行最后一次 var t=null;//全局变量 //方法内写： if(t!=null){ clearTimeout(t) } t=setTimeout(function(){//多次触发后在5秒后执行最后一次触发 //此处写要执行的方法、函数 },5000) 多次触发只执行第一次 var bool = true;//全局变量 方法内： if(bool){//第一次执行，之后五秒内不再执行 //此处写需要触发的函数\方法 bool = false setTimeout(()=
js事件只执行一次
qq_33298964的博客
11-07 4503
一事件只执行一次，有以下两种方法。
自定event事件之全局初始化中自动触发（二）
weixin_30840573的博客
11-15 112
利用（一）组件：Y_GLOBAL_EVENT 场景：界面加载后在COMPONENTCONTROLLER触发自定义event事件 首先要搞懂WebDynpro启动时的hokeMethod执行顺序如下图： 从上至下，依次进行 从执行顺序中可以看出加载完VIEW视图之后，最后会执行COMPONENTCONTROLLER中的一个叫WDDOPOSTPROCESSING方法， 所以可以利用该方法...
事件只触发一次
dongguojun的专栏
01-07 408
[code="js"] $(document).ready(function(){ // $("#testDiv").html("使用动态创建的$(document).ready(function)方法"); // $("#switcher-normal").bind("click",function(){ // $("#btnParent .button&quot
html animation怎么多次触发,CSS动画之animation再次触发与防止多次触发
weixin_39707201的博客
06-26 2018
上一篇博客记录了animation的介绍,这次记录一下具体的使用。1.再次触发动画可以通过给元素添加类名来触发animation动画，但是需要注意的是再次触发的情况。比如，如果想每次点击鼠标都能重新触发动画，CSS和JS并没有提供这种功能。我们能做的就是要先除去动画的效果，然后让文档重新计算样式，最后将动画效果再次添加到元素上。假定有下面的页面//HTML:Clickmetorunthe...
React重新渲染的触发机制及其优化策略
最新发布
CreatorRay的博客
07-27 2074
React是一个用于构建用户界面的JavaScript库，它的核心特点之一是使用虚拟DOM（Virtual DOM）来实现高效的组件渲染。那组件重新渲染的机制是如何呢？基于这些机制，如果进行优化呢？
React 生命周期
1234Wu--Blog
01-30 1670
React 生命周期 1、生命周期图 react生命周期函数挂载、卸载只会执行一次，更新会执行多次。 2、生命周期的三个阶段 1）挂载时（创建） 执行时机：组件创建时（页面加载时） 执行顺序：Constructor() --> render() --> componentDidMount() 钩子函数 触发时机 作用 constructor () 创建组件时 1,初始化state； 2.为事件处理程序绑定this render () 每次组件渲染都会触发 渲染UI（
EventBus使用
Guilin666的博客
10-31 210
//依赖 implementation 'org.greenrobot:eventbus:3.1.1' /步骤： 1.在需要传值的地方使用 //传递数据 //参数为对象或者集合 EventBus.getDefault().post(mStudents); 2.在接收的地方使用 //注册放入onCreate因为只执行一次 EventBus.getDefault().regi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值