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>