您的位置:首页 > Web前端 > JavaScript

【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

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: