如何在进行倒计时时停止 jquery 事件
How to stop jquery event while working on countdown
我几乎不了解 jquery。我正在尝试倒计时,所以在搜索后我找到了下面的代码。
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);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
但是倒计时在一分钟后重复。就像它去 03、02、01 时一样,它又从 59 开始。
如何停止?
我想在给定的分钟后提醒消息并停止计时器。
您需要存储间隔ID并使用clearInterval(intervalId);
停止它。
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var intervalId = 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) {
clearInterval(intervalId);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
setInterval
函数returns一个标识符。将间隔 ID 存储在变量中。这允许您在需要时使用 clearInterval()
取消间隔。
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) {
clearInterval(interval);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 5 * 1, // 5 Seconds for easy testing
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time">
00:00
</div>
<button type="button" class="start">
START
</button>
我几乎不了解 jquery。我正在尝试倒计时,所以在搜索后我找到了下面的代码。
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);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
但是倒计时在一分钟后重复。就像它去 03、02、01 时一样,它又从 59 开始。
如何停止?
我想在给定的分钟后提醒消息并停止计时器。
您需要存储间隔ID并使用clearInterval(intervalId);
停止它。
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
var intervalId = 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) {
clearInterval(intervalId);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 60 * 1,
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
setInterval
函数returns一个标识符。将间隔 ID 存储在变量中。这允许您在需要时使用 clearInterval()
取消间隔。
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) {
clearInterval(interval);
}
}, 1000);
}
$('.start').on('click', function(){
var oneMinute = 5 * 1, // 5 Seconds for easy testing
display = document.querySelector('#time');
startTimer(oneMinute, display);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time">
00:00
</div>
<button type="button" class="start">
START
</button>