关于setInterval：如果你在不刷新页面的情况下，再次点击调用setInterval的按钮会怎样？

时间：2014-10-27 12:42:17 阅读：621 评论：0 收藏：0 [点我收藏+]

模仿教程做了一个倒计时的小页面，代码如下：

 1 <html>
 2 <head>
 3     <title>
 4     
 5     </title>
 6     <style>
 7 
 8     </style>
 9     
10 </head>
11 <body>
12     <form id="inputArea">
13         请输入分钟数<input type="text" value="请输入数字" id="minutes"></input>
14         <input id="startBtn" type="button" value="开始计时"></input>
15     </form>
16     <h1 id="timeDisplay">0:00</h1>
17     
18     <script>
19         var secondsRemaining;
20         var intervalHandle;
21         
22         function getTime(){
23             //获得输入的分钟数
24             var inputMinutes = document.getElementById("minutes").value;
25             //验证输入的数字是否为合法
26             if(isNaN(inputMinutes)){
27                 alert("请输入合法的数字");
28                 return;
29             };
30             secondsRemaining = inputMinutes * 60;
31         
32         };
33         
34         //时间开始慢慢倒计时
35         
36         
37         document.getElementById("startBtn").onclick = function() {
38             //获得合法的时间
39             getTime();
40             
41             //倒计时
42             function countDown() {
43                 //展示时间
44                 var min = Math.floor(secondsRemaining / 60);
45                 var sec = secondsRemaining - (min * 60);
46                 var message = min + ":" + sec;
47                 document.getElementById("timeDisplay").innerHTML = message;
48                 secondsRemaining--;
49             };
50             intervalHandle = setInterval(countDown,1000);
51             };
52         
53     </script>
54 </body>
55 </html>

但是运行的时候发现一个有意思的现象：

因为上面这段代码，在开始倒计时以后并没有隐藏输入框和倒计时按钮，这就导致如果你开始倒计时以后，不刷新页面，而是重新点击一下倒计时按钮，那么下面的倒计时会重新开始，但是倒计时的速度就变成了原来的2倍了，再点击一次又变成上一次的二倍了，以此类推。等于说如果你不刷新页面的情况下，再次点击开始倒计时按钮，在1000毫秒的时间里，调用了两次countDown这个函数；