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>【js】setInterval动态改变定时器时间周期
原文地址：https://www.cnblogs.com/carsonwuu/p/9120994.html