首页 > 代码库 > 关于setInterval：如果你在不刷新页面的情况下，再次点击调用setInterval的按钮会怎样？
关于setInterval：如果你在不刷新页面的情况下，再次点击调用setInterval的按钮会怎样？
模仿教程做了一个倒计时的小页面，代码如下：
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这个函数；
关于setInterval：如果你在不刷新页面的情况下，再次点击调用setInterval的按钮会怎样？
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。