如何停止重新启动计数器

Question

var time=0;
var i=0;

function stopwatch(){
document.getElementById("p1").innerHTML=i;
i++; }



function start(){
time=window.setInterval('stopwatch()',500);
}
function stop(){
window.clearInterval(time);
}
</script>
<p id="p1">0</p>
<button onclick="start()">Start counter</button>
<button onclick="stop()">Stop counter</button>

我正在尝试制作秒表，但如果我多次单击开始按钮 每当我单击"开始按钮"并且"停止"按钮不起作用时，时间就会越来越快 如何解决此问题

Answer 1

var time=0;
var i=0;
function stopwatch(){
document.getElementById("p1").innerHTML=i;
i++; }

function start(){
if(time) return;
time=window.setInterval('stopwatch()',500);
}
function stop(){
window.clearInterval(time);
time = null;
}

<p id="p1">0</p>
<button onclick="start()">Start counter</button>
<button onclick="stop()">Stop counter</button>

Answer 2

您可以在启动时禁用该按钮，并在停止时启用它

var time=0;
var i=0;
var start_btn = document.getElementById("start")
function stopwatch(){
document.getElementById("p1").innerHTML = i;
i++; 
}

function start(){
time = window.setInterval(() => stopwatch(),500);
start_btn.disabled = true;
}
function stop(){
window.clearInterval(time);
start_btn.disabled = false;
}

<p id="p1">0</p>
<button id="start" onclick="start()">Start counter</button>
<button onclick="stop()">Stop counter</button>

Answer 3

跟踪标志并处理此问题。但是禁用按钮是一个很好的 UX 行为。您可以按如下方式组合两者。

var time=0;
var i=0;
var started = false;

function stopwatch(){
document.getElementById("p1").innerHTML=i;
i++; 
}

function start(){
if(!started){
started = true;
updateButtons();
time=window.setInterval('stopwatch()',500);
}
}
function stop(){
started = false;
updateButtons();
window.clearInterval(time);
}
function updateButtons(){
document.getElementById("startbtn").disabled = started
document.getElementById("stopbtn").disabled = !started
}

<p id="p1">0</p>
<button id="startbtn" onclick="start()">Start counter</button>
<button id="stopbtn" onclick="stop()">Stop counter</button>