【js】setInterval动态改变定时器时间周期,三次点击事件,时间间隔内只捕捉一次点击事件
2018-06-01 11:53
861 查看
setInterval动态改变定时器时间周期,三次点击事件,时间间隔内只捕捉一次点击事件
一、目标:
setInterval初始时间间隔为500ms,动态更改为2s/5s/暂停。
二、效果(//gif,如果看到的是静态的png,你该去换台能看动图的电脑。手动滑稽-。-)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no" /--> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>动态改变定时器的周期</title> 7 <style type="text/css"> 8 html{height:100%} 9 body{width:60%;height:100%;margin:0px auto;padding:0px} 10 #container{height:5%} 11 </style> 12 <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BMgnVpFhGSH7GE8l7qnWhESkeCr12n9v"> --> 13 <!-- //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" --> 14 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 15 </script> 16 17 </head> 18 <script> 19 window.index=6; 20 </script> 21 22 <body> 23 <p style='color:gray'>周期定时器,初始化周期为500ms</p> 24 <div id="container"></div> 25 <button id='t1'>2s</button> 26 <button id='t2'>5s</button> 27 <button id='t3'>暂停</button> 28 29 <button id="three">clickThree</button> 30 <button id="clickOne">clickOne</button> 31 </body> 32 <script type="text/javascript"> 33 34 //window.index=1; 35 var timer=500; 36 var index=0; 37 38 var t=setInterval(change,timer); 39 40 function change(){ 41 $('#t1').click(function(){ 42 timer=2000; 43 clearInterval(t); 44 t=setInterval(change,timer); 45 }); 46 $('#t2').click(function(){ 47 timer=5000; 48 clearInterval(t); 49 t=setInterval(change,timer); 50 }); 51 $('#t3').click(function(){ 52 timer=500; 53 clearInterval(t); 54 //t=setInterval(change,timer); 55 }); 56 document.getElementById('container').innerHTML=index ; 57 index++; 58 } 59 60 </script> 61 <script> 62 63 var count = 0, timer; 64 $('#three').click(function(){ 65 console.log("click"); 66 if(count < 2){ 67 if(timer){ 68 clearTimeout(timer); 69 } 70 count ++; 71 timer = setTimeout(function(){ 72 count = 0; 73 }, 500); 74 } 75 else if(count === 2){ 76 count = 0; 77 clearTimeout(timer); 78 threeClick(); 79 } 80 }); 81 function threeClick(){ 82 alert('three click'); 83 } 84 </script> 85 <script> 86 var timeoutflag = null; 87 $('#clickOne').click(function() { 88 if(timeoutflag != null){ 89 clearTimeout(timeoutflag); 90 } 91 92 timeoutflag=setTimeout(function(){ 93 dosomething(); 94 },1000); 95 96 }); 97 98 function dosomething(){ 99 alert(1); 100 } 101 </script> 102 </html>View Code
相关文章推荐
- 动态改变setInterval的时间间隔
- 动态改变setInterval的时间间隔
- 通过JS控制各种元素的点击事件的【时间间隔】,特别适合【发表评论】功能
- js动态创建input元素,增加点击事件遇到的问题
- js动态改变input的值不触发input的change事件的解决办法
- js动态改变onclick事件
- 使用js动态添加点击事件时,click与onclick的区别
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
- js控制再次点击按钮之间的间隔时间可防止重复提交
- 百度地图API自定义点路书,路书点击事件,路书速度动态改变
- JS为循环动态生成的节点添加点击事件
- [js动态报表][兼容IE6+/火狐/360/谷歌/等各大浏览器][可手动设置间隔时间读取数据/并且显示在图表上]
- 使用js动态添加点击事件时,click与onclick的区别
- 加入点击时间间隔的点击事件IntervalOnClick
- 关于js中动态生成的点击事件触发两次的讨论
- 当用js动态的改变一个输入框中的值后,并不能触发它的onchange事件why?
- js解决click事件点击事件间隔方法
- js动态添加点击事件常见错误
- php使用post动态选择头像和js事件动态改变头像
- 关于ListView中Item点击事件,动态改变Item中控件属性