【js】setInterval动态改变定时器时间周期，三次点击事件，时间间隔内只捕捉一次点击事件...
2020-02-13 00:48
781 查看
setInterval动态改变定时器时间周期，三次点击事件，时间间隔内只捕捉一次点击事件
一、目标：
setInterval初始时间间隔为500ms，动态更改为2s/5s/暂停。
二、效果（//gif,如果看到的是静态的png，你该去换台能看动图的电脑。手动滑稽-。-）
三、实现：
1.动态改变计时器时间周期。
1 var t=setInterval(change,timer);
2
3 function change(){
4 $('#t1').click(function(){
5 timer=2000;
6 clearInterval(t);
7 t=setInterval(change,timer);
8 });
9 $('#t2').click(function(){
10 timer=5000;
11 clearInterval(t);
12 t=setInterval(change,timer);
13 });
14 $('#t3').click(function(){
15 timer=5000;
16 clearInterval(t);
17 //t=setInterval(change,timer);
18 });
19 document.getElementById('container').innerHTML=index ;
20 index++;
21 }
2.三次点击事件（setTimeout）
1 var count = 0, timer;
2 $('#three').click(function(){
3 console.log("click");
4 if(count < 2){
5 if(timer){
6 clearTimeout(timer);
7 }
8 count ++;
9 timer = setTimeout(function(){
10 count = 0;
11 }, 500);
12 }
13 else if(count === 2){
14 count = 0;
15 clearTimeout(timer);
16 threeClick();
17 }
18 });
19 function threeClick(){
20 alert('three click');
21 }
3.时间间隔内只捕捉一次点击事件（setTimeout）
1 var timeoutflag = null;
2 $('#clickOne').click(function() {
3 if(timeoutflag != null){
4 clearTimeout(timeoutflag);
5 }
6
7 timeoutflag=setTimeout(function(){
8 dosomething();
9 },1000);
10
11 });
12
13 function dosomething(){
14 alert(1);
15 }
四、完整项目
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
转载于:https://www.cnblogs.com/carsonwuu/p/9120994.html
- 点赞
- 收藏
- 分享
- 文章举报
aoayyu826824
发布了0 篇原创文章 · 获赞 2 · 访问量 327
私信
关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【js】setInterval动态改变定时器时间周期，三次点击事件，时间间隔内只捕捉一次点击事件
- 动态改变setInterval的时间间隔
- js 实现间隔相同时间自动触发两个按钮的点击事件，两个按钮触发事件时间间隔一样，然后循环
- 动态改变setInterval的时间间隔
- 动态改变setInterval的时间间隔
- 通过JS控制各种元素的点击事件的【时间间隔】，特别适合【发表评论】功能
- js动态传值，触发值改变事件
- js控制再次点击按钮之间的间隔时间可防止重复提交
- [置顶] 时间一到，开抢月饼（原生JS简单实现定时自动点击事件）
- 使用js动态添加点击事件时，click与onclick的区别
- js 两时间， 求出两时间 间隔月数； js 获取两时间的事件差（天，小时，分，秒）
- js动态替换数据的点击事件
- js动态获取当前点击事件的属性值
- 动态添加标签属性后，js点击事件获取不到动态添加的属性
- js动态加载HTML元素时出现的无效的点击事件
- js控制再次点击按钮之间的间隔时间
- js控制当再次点击按钮时的间隔时间
- JS 通过点击事件动态添加文本框
- js/jq动态添加Class,无法添加点击事件
- 使用js动态添加点击事件时，click与onclick的区别