【js】setInterval动态改变定时器时间周期，三次点击事件，时间间隔内只捕捉一次点击事件

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

 

posted @ 2018-06-01 11:53  carsonwuu  阅读(6007)  评论(0)  编辑  收藏  举报