当按下按钮时重置倒计时计时器?

Question

我有一个按钮，当按下计时器开始倒计时。我有一个困难的时间弄清楚如何重置倒计时计时器一旦相同的按钮被按下。

我也想知道为什么我的时间停在0:1??

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')

let myTimer = null
function timer() {
if (myTimer !== null) {
clearInterval(myTimer)
}
myTimer = setInterval(function timer() {
let seconds = time % 60
let minutes = Math.floor(time / 60)
seconds = seconds < 10 ? '0' + seconds : seconds
time--;
if (time >= 0) {
spaceForTime.innerHTML = `${minutes}:${seconds}`
} else if (time === 0) {
spaceForTime.innerText = "Move onto the next question!"
clearInterval(time)
}
}, 1000);
}

<div id="button">
<button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>

Answer 1

在计时器函数中添加一个检查，查看计时器是否已经运行。如果是，在再次启动计时器之前，清除间隔并将时间重置为其起始值

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')
let myTimer = null
function timer() {
if (myTimer !== null) {
clearInterval(myTimer)
time = startingCount * 60
}
myTimer = setInterval(function() {
let seconds = time % 60
let minutes = Math.floor(time / 60)
seconds = seconds < 10 ? '0' + seconds : seconds
if (time >= 0) {
spaceForTime.innerHTML = `${minutes}:${seconds}`
time--;
} else {
spaceForTime.innerText = "Move onto the next question!"
clearInterval(myTimer)
}
}, 1000)
}

Answer 2

您必须在代码中更改:

let startingCount = 5
let time = startingCount * 60
let spaceForTime = document.getElementById('countdown')

let myTimer = null
function timer() {
startingCount = 5;<---------
if (myTimer !== null) {
clearInterval(myTimer)
}
myTimer = setInterval(function timer() {
let seconds = time % 60
let minutes = Math.floor(time / 60)
seconds = seconds < 10 ? '0' + seconds : seconds
time--;
if (time >= 0) {
spaceForTime.innerHTML = `${minutes}:${seconds}`
} else{ <---------
spaceForTime.innerText = "Move onto the next question!"
clearInterval(time)
}
}, 1000);
}

Answer 3

您需要在清除timer()内部的先前间隔后重新声明startingCount和time变量

let startingCount = 5
let time = 0 // set this inside timer()
let spaceForTime = document.getElementById('countdown')
let myTimer = null
function timer() {
if (myTimer !== null) {
clearInterval(myTimer)
}

time = startingCount * 60 // initialize the time here
myTimer = setInterval(function timer() {
let seconds = time % 60
let minutes = Math.floor(time / 60)
seconds = seconds < 10 ? '0' + seconds : seconds
time--;
if (time >= 0) {
spaceForTime.innerText = `${minutes}:${seconds}`
} else {
spaceForTime.innerText = "Move onto the next question!"
clearInterval(time)
}
}, 1000);
}

<div id="button">
<button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>

Answer 4

计时器停在0:01的原因是，首先，您设置了minutes和seconds变量，然后减少了time。您需要在设置minutes和seconds变量之前减少时间。

Answer 5

需要考虑的几点:

首先，计时器没有重置，因为您没有重置time的值(正如其他人提到的)。

第二，它停在0:01的原因是因为你的time--出现在你的if条件之前，所以这个条件在应该显示0秒的迭代上计算time == -1。执行为:

--> currently showing 0:01.
--> new seconds calculated to be 00
--> time-- results in time = -1
--> condition fails since time < 0
--> does not show updated seconds

要解决这个问题，请将time--移动到interval函数的末尾(也就是在if条件之后)。

第三，由于您将>=放入if条件中，因此从未访问else if条件。它应该被改成严格的大>

修改后的代码:

let startingCount = .1;
let time = startingCount * 60;
let spaceForTime = document.getElementById('countdown');
let myTimer = null;
function timer() {
if (myTimer !== null) {
clearInterval(myTimer);
time = startingCount * 60;
}

myTimer = setInterval(function timer() {
let seconds = time % 60;
let minutes = Math.floor(time / 60);
seconds = seconds < 10 ? '0' + seconds : seconds;
if (time > 0) {
spaceForTime.innerHTML = `${minutes}:${seconds}`;
} else if (time === 0) {
spaceForTime.innerText = "Move onto the next question!";
clearInterval(time);
}
time--;
}, 1000);
}

<div id="button">
<button onclick="timer()" id="letsChat">Let's Chat!</button>
</div>
<span id="countdown"></span>

注:缩短时间为6秒，以更快的演示