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>