setInterval动态改变定时器时间周期
一、目标：
setInterval初始时间间隔为500ms，动态更改为2s/5s/暂停。
二、效果（//gif,如果看到的是静态的png，你该去换台能看动图的电脑。）
三、实现：
js控制：
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 }
html实例：
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 </head>
17
18 <body>
19 <p style=‘color:gray‘>周期定时器，初始化周期为500ms</p>
20 <div id="container"></div>
21 <button id=‘t1‘>2s</button>
22 <button id=‘t2‘>5s</button>
23 <button id=‘t3‘>暂停</button>
24 <script type="text/javascript">
25
26 var index=0;
27 var timer=500;
28
29
30 var t=setInterval(change,timer);
31
32 function change(){
33 $(‘#t1‘).click(function(){
34 timer=2000;
35 clearInterval(t);
36 t=setInterval(change,timer);
37 });
38 $(‘#t2‘).click(function(){
39 timer=5000;
40 clearInterval(t);
41 t=setInterval(change,timer);
42 });
43 $(‘#t3‘).click(function(){
44 timer=5000;
45 clearInterval(t);
46 //t=setInterval(change,timer);
47 });
48 document.getElementById(‘container‘).innerHTML=index ;
49 index++;
50 }
51
52 </script>
53 </body>
54 </html>
原文地址：https://www.cnblogs.com/carsonwuu/p/9120994.html
时间： 2024-08-25 09:39:46