【js】setInterval動態改變定時器時間周期
阿新 • • 發佈：2018-06-01
-type IT set ble java val 如果 In TE 
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> 7View Code<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動態改變定時器時間周期