[英]How to stop JavaScript Timer?
I have a simple Bootstrap page that includes a 45 second countdown timer and a button which I intend to include on a bigger project later.我有一个简单的 Bootstrap 页面,其中包括一个 45 秒倒计时计时器和一个按钮,我打算稍后将其包含在更大的项目中。 The countdown timer will start on a click of the button.
倒数计时器将在单击按钮时启动。
What I wanted to do is that when I click on the button again within the 45 seconds countdown interval, the counter will reset.我想要做的是,当我在 45 秒倒计时间隔内再次单击按钮时,计数器将重置。 I am not able to do that.
我不能那样做。 What I tried to do is to use the clearInterval function at the very beginning of the errorTimer function.
我试图做的是在 errorTimer 函数的最开始使用 clearInterval 函数。 But, it did not work.
但是,它没有用。
Here are my codes:这是我的代码:
// Timer for error message - 45 seconds. function startTimer(duration, display) { var timer = duration, minutes, seconds; setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; } }, 1000); } function errorTimer() { var fortyFiveSeconds = 60 * .75, display = document.querySelector('#time'); startTimer(fortyFiveSeconds, display); };
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-12 mt-5"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4 text-center"> <p id="time"></p> </div> <div class="col-md-4"></div> </div> </div> <button type="button" class="btn btn-info" onclick="errorTimer()">Submit Button</button>
Use clearInterval like this像这样使用 clearInterval
...
// Timer for error message - 45 seconds.
var timerId;
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
if(timerId != undefined) {
clearInterval(timerId)
}
timerId = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
function errorTimer () {
var fortyFiveSeconds = 60 * .75,
display = document.querySelector('#time');
startTimer(fortyFiveSeconds, display);
};
...
As @Shidersz mentioned, you need to store the id associated with the interval and use that id to clear the interval before resetting the clock.正如@Shidersz 提到的,您需要存储与间隔关联的 id,并在重置时钟之前使用该 id 清除间隔。
// Timer for error message - 45 seconds. var id = null; function startTimer(duration, display) { if (id !== null) { clearInterval(id); id = null; } var timer = duration, minutes, seconds; id = setInterval(function() { minutes = parseInt(timer / 60, 10) seconds = parseInt(timer % 60, 10); minutes = minutes < 10 ? "0" + minutes : minutes; seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = minutes + ":" + seconds; if (--timer < 0) { timer = duration; } }, 1000); } function errorTimer() { var fortyFiveSeconds = 60 * .75, display = document.querySelector('#time'); startTimer(fortyFiveSeconds, display); };
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-12 mt-5"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4 text-center"> <p id="time"></p> </div> <div class="col-md-4"></div> </div> </div> <button type="button" class="btn btn-info" onclick="errorTimer()">Submit Button</button>
You could stop the timer by clearing the interval:您可以通过清除间隔来停止计时器:
// Timer for error message - 45 seconds.
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var interval = setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
return function(){ clearInterval(interval); };
}
function errorTimer () {
var fortyFiveSeconds = 60 * .75,
var display = document.querySelector('#time');
var stopper = startTimer(fortyFiveSeconds, display);
setTimeout(stopper, 20 * 1000); // stop timer 20 seconds later.
};
I make use of a simple function returned by the startTimer function, that can be used to clear the interval at a later point.我利用了 startTimer 函数返回的一个简单函数,该函数可用于在以后清除间隔。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.