我正在尝试创建一个简单的 vanilla JS 秒表。设法让它工作但是当我单击我的重置按钮时,该值返回我的 innerHTML 更改,但是它在返回值 00:00:1 而不是 00:00:00 之前快速闪烁一秒钟。在它正确重置之前,我必须点击它两次。但是,当我暂停我的计时器然后重置时,它工作得很好。我的代码中的缺陷在哪里?
代码:
var status = 0;
var time = 0;
document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);
function start() {
status = 1;
document.getElementById('start').disabled = true;
timer();
}
function pause() {
status = 0;
document.getElementById('start').disabled = false;
}
function reset() {
time = 0;
status = 0;
document.getElementById('label').innerHTML = '00:00:00';
document.getElementById('start').disabled = false;
}
function timer() {
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time / 10 / 60);
var sec = Math.floor(time / 10 % 60);
var mill = time % 10;
if (min < 10) {
min = '0' + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
timer();
}, 100);
}
}
<div id="wrapper">
<h1 id="label">00:00:00</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
最佳答案
这是因为 setTimeout
,因为它计划每 100ms
运行一次,它会在您单击重置后运行一次(在 100ms
之后).为了防止它在重置后运行,您可以将超时存储在变量中并使用 clearTimeout
停止它:
var status = 0;
var time = 0;
var t; // the timeout
document.getElementById('start').addEventListener('click', start);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('reset').addEventListener('click', reset);
function start() {
status = 1;
document.getElementById('start').disabled = true;
timer();
}
function pause() {
status = 0;
document.getElementById('start').disabled = false;
}
function reset() {
time = 0;
status = 0;
clearTimeout(t); // stop the timeout
document.getElementById('label').innerHTML = '00:00:00';
document.getElementById('start').disabled = false;
}
function timer() {
if (status == 1) {
t = setTimeout(function() { // start the timeout
time++;
var min = Math.floor(time / 10 / 60);
var sec = Math.floor(time / 10 % 60);
var mill = time % 10;
if (min < 10) {
min = '0' + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = '0' + sec;
}
document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill;
timer();
}, 100);
}
}
<div id="wrapper">
<h1 id="label">00:00:00</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
</div>
关于Javascript 秒表错误的重置值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46506364/