jssetInterval动态改变定时器时间周期

Posted carsonwuu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jssetInterval动态改变定时器时间周期相关的知识,希望对你有一定的参考价值。

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

 

以上是关于jssetInterval动态改变定时器时间周期的主要内容,如果未能解决你的问题,请参考以下文章

自己定义定时器(Timer)

SpringBoot 动态操作定时任务(启动、停止、变更执行周期)

quartz spring 实现动态定时任务

SpringBoot自带的定时功能

spring与quartz整合实现分布式动态创建,删除,改变执行时间定时任务(mysql数据库)

ThreadPoolTaskScheduler动态添加、移除定时任务