js多次触发事件，在一定延迟内只执行一次 （事件累加）

最新推荐文章于 2023-06-02 21:17:23 发布
最新推荐文章于 2023-06-02 21:17:23 发布
阅读量1.1k 收藏
点赞数
原文链接：http://www.cnblogs.com/shangjun6/p/10600472.html
版权

　　js多次触发事件，在一定延迟内只执行一次的案例：

　　　　<!DOCTYPE html>
　　　　<html>
　　　　　　<head>
　　　　　　　　<meta charset="UTF-8">
　　　　　　　　<title></title>
　　　　　　　　<style>
　　　　　　　　　　.div{
　　　　　　　　　　　　width:200px;
　　　　　　　　　　　　height:200px;
　　　　　　　　　　　　background:red;
　　　　　　　　　　　　transition:width 2s linear 0s;
　　　　　　　　　　}
　　　　　　　　</style>
　　　　　　</head>
　　　　　　<body>
　　　　　　　　<div class="div"></div>
　　　　　　</body>
　　　　</html>
　　　　<script>
　　　　　　var div=document.querySelectorAll(".div")[0];
　　　　　　var num=0;
　　　　　　var t=null;
　　　　　　//事件累加的功能
　　　　　　//js 多次触发点击事件,在一定延迟内只执行一次
　　　　　　div.οnclick=function(){
　　　　　　　　if(t!=null){
　　　　　　　　　　clearTimeout(t)
　　　　　　　　}
　　　　　　　　t=setTimeout(function(){
　　　　　　　　　　num++;
　　　　　　　　　　console.log(num);
　　　　　　　　},500)
　　　　　　}

　　　　</script>

转载于:https://www.cnblogs.com/shangjun6/p/10600472.html

weixin_30699741
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CocosCreator-Schedule计时器-设定及触发原理
weixin_47879201的博客
12-28 4533
计时器 JavaScript自带的定时任务 setTimeout 作用：设置一个定时器，在指定时间(毫秒)后触发，调用传入的回调函数。 参数类型：(function/code, delayTime, args…) function:         回调函数 code:              字符串形式的代码，会使用eval()执行，因此不推荐使
“惨痛”的一次面试之旅
liuzijiang1123的专栏
07-05 485
星期一晚上刚下高铁就发现深圳乌云密布，还没等我掐指一算，雨水哗啦啦地浇打在大地上；        雨一直下，气氛不太融洽.......手机查了一下下一个目标地的距离，发现还需要一个半小时的路程才能到达面试的地方，背上书包没多想，马不停蹄地开始转战于各个地铁口，换乘，换乘，再换乘。终于到达了目的地附件，肚子仿佛知道了这个“喜讯”，大叫一声，才发现坐了4个小时高铁的我还没吃饭；这个时候不知道哪根神经
js代码-防抖（debounce） 作用短时间内多次（频繁）该函数，只允许执行最后一次或者第一次。
07-16
js代码-防抖（debounce） 作用短时间内多次（频繁）该函数，只允许执行最后一次或者第一次。
高频js面试题之节流函数（规定时间内多次调用，只触发一次）
furfur-jiang的博客
02-08 2337
节流函数 原理：规定在单位时间内只触发一次函数，如果在这个在这个单位时间内触发多次函数，只有一次生效 例子说明 在输入框内输入数据，到达时间后自动打印，且在该时间内只打印一次 效果 代码 html代码 输入：<input id="inputs" type="text"> js代码 function throttle(fn, delay) { let timer = ...
js 多次触发点击事件,在一定延迟内只执行一次
热门推荐
rockllee的博客
05-23 1万+
$(function(){ var timeoutflag = null; $('#inputAddress1').click(function() { if(timeoutflag != null){ clearTimeout(timeoutflag); } timeoutflag=setTime...
JS 使用闭包函数 实现 当用户在3秒之内连续点击一个按钮，事件函数只执行一次
weixin_68166404的博客
08-01 1696
JS 使用闭包函数 实现 当用户在3秒之内连续点击一个按钮，事件函数只执行一次
js scroll 滚动连续多次触发事件只执行一次
weixin_30564901的博客
03-24 2811
(function() { var finished = true; function loadData() { //xxxx finished = true; } dom.onscroll = function() { if(finished && this.scrollHeight...
jquery数字动画打开页面载入数字累加动画效果代码
11-23
- 为了性能考虑，避免过于频繁的DOM操作，可以考虑将数字累加后的结果存储在JavaScript变量中，最后一次性更新到DOM元素。 通过以上步骤，我们可以实现一个基本的jQuery数字累加动画效果。在实际项目中，根据具体...
JavaScript高级 - 纯js实现文件上传大文件切片上传断点续传（客户端）
lixiaosenlin的专栏
03-18 7464
文章目录前言一、环境准备及依赖库二、项目结构三、 功能实现1、axios二次封装2、 单文件上传FROM-DATA，先选文件再上传3、 单文件上传BASE64，只能上传小于100K的png或jpg图片文件4、多文件上传FORM-DATA5、多文件拖拽上传FORM-DATA6、大文件切片上传，断点续传FORM-DATA总结 前言 在另一篇文章JavaScript高级 - nodejs+koa2实现文件上传大文件切片上传断点续传(服务器端)中已经介绍了文件上传的服务器端实现，并实现了几个不同上传形式的服务
jQuery事件处理、动画、Ajax
weixin_38654336的博客
06-17 381
一、jQuery的事件方法描述bind()向匹配元素附加一个或更多事件处理器blur()触发、或将函数绑定到指定元素的 blur 事件change()触发、或将函数绑定到指定元素的 change 事件click()触发、或将函数绑定到指定元素的 click 事件dblclick()触发、或将函数绑定到指定元素的 double click 事件delegate()向匹配元素的当前或未来的子元素附加一...
js定时器(执行一次、重复执行)
12-09
1，只执行一次的定时器 代码如下: [removed] //定时器 异步运行 function hello(){ alert(“hello”); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout(“hello()”,3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器 [removed] 2，重复执行的定时器 代码如下: [removed] function hello(){ alert(“hello”); } //重复执行某个方法
js事件只执行一次
qq_33298964的博客
11-07 4397
一事件只执行一次，有以下两种方法。
js延迟执行函数
cjcxy_202011的博客
08-02 2096
在js中，延迟执行函数有两种： setTimeout和setInterval，用法如下： setTimeout(test(),“2000”); //2000毫秒后执行test()函数，只执行一次。 setInterval(test(),“2000”); //每隔2000毫秒执行一次test()函数，执行无数次。 var interval = window.setInterval(test(),“2000”); window.clearInterval(interval); //停止执行setInt
JS中单击多次执行一次的问题
chd_sun的博客
10-16 1431
在对日的一个项目之中遇到一个要求，多次点击按键只执行一次的问题 下面是一个ajax的方法 点击之后变成 执行之后又恢复到可用状态 代码如下：只是个例子 //lockTarget: '#G707_cmd_Kensaku'　通过id选择器锁住的你需要的控件（这里锁住了检索的控件） AjaxClient.post(countUrl, form,{lockTarget: '#G707_cmd_Ken...
js中让函数只执行一次
业余前端的职业经历
06-02 1830
在做项目的时候 经常会碰见一些 只允许我们请求一次的情况，当我们来回切页面 或者 切换tab的时候 第一次切换 可能需要我们请求数据。今天要讲的就是另一种思路了 让函数在当前情况下 只能执行一次，这个其实还比较简单 我们可以利用闭包的知识来处理。但是当切换过之后 就不需要再次请求数据了 以往我们的做法 可能判断这个页面有无数据 或者是看是否是第一次点击。这里还要注意的是 如果你的组件被卸载的话 还是最好 注意清理掉引用。查看打印的效果 会发现 只是打印了一次 hello world。
多次触发只执行最后一次/第一次（防抖、节流）
weixin_46382390的博客
09-27 5517
多次触发只执行最后一次 var t=null;//全局变量 //方法内写： if(t!=null){ clearTimeout(t) } t=setTimeout(function(){//多次触发后在5秒后执行最后一次触发 //此处写要执行的方法、函数 },5000) 多次触发只执行第一次 var bool = true;//全局变量 方法内： if(bool){//第一次执行，之后五秒内不再执行 //此处写需要触发的函数\方法 bool = false setTimeout(()=
JS用setTimeOut延迟执行一段代码？
m0_54066656的博客
04-18 640
JS怎么延迟执行某一段代码？试试用setTimeOut，做动画的时候特别好。
实现多次点击只触发一次点击事件
weixin_42464250的博客
11-13 6297
$('.sumbit1').click(function () { $('.sumbit1').unbind();//在点击事件里移除触发事件 var pad = $('input:radio[name=info]:checked').val(); if(typeof(pad)=='undefined'){ alert('请选择服务'); }els...
使用JS监听鼠标滚轮事件，并且滑动一次只执行一次事件方法
x先生的博客
07-18 8017
使用JS监听鼠标滚轮事件，并且滑动一次只执行一次事件方法function autoRoll() { $(document).on("mousewheel DOMMouseScroll", function(e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta >
vue 鼠标滑轮一定时间内只触发一次事件
最新发布
07-11
在Vue中，你可以使用`lodash`库中的`throttle`函数来实现鼠标滑轮事件在一定时间内只触发一次的效果。首先，确保你已经安装了`lodash`库。 然后，在你的Vue组件中，你需要引入`throttle`函数并在鼠标滑轮事件的处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值