使用SetInterval的JavaScript计时器

Question

我正在尝试使用JavaScript创建一个计时器。我有下面的代码，但问题是我不能清除间隔，除非我在外面声明它们，但当我在一开始声明它们时，它们在没有点击按钮的情况下运行。有什么办法我能解决的吗？

let btnTimer = document.querySelectorAll(".timerButton");
let totalTimer = document.getElementById("totalTimer");
let i = 0, j = 0, h = 0, k = 0;
let time = k.toString() + h + ":" + j + i;
totalTimer.innerText = time;

for (item of btnTimer) {
item.addEventListener("click", (e) => {
let btnTmr = e.target.innerText;
if (btnTmr == "Start") {
i = i++;
let intervalI = setInterval(function(){
time = k.toString() + h + ":" + j + i;
totalTimer.innerText = time;
if (i < 9) {
i++;
} else if (i = 9) {
i = 0;
}
}, 1000);
let intervalJ = setInterval(function(){
time = k.toString() + h + ":" + j + i;
totalTimer.innerText = time;
if (j < 6) {
j++;
} else {
j = 0;
}
}, 10000);
} else if (btnTmr == "Pause") {
clearInterval(intervalI);
clearInterval(intervalJ);
} else {
time = "00:00"
totalTimer.innerText = time;
clearInterval(intervalI);
clearInterval(intervalJ);
}
})}

Answer 1

在这种情况下，我会将按钮事件侦听器分解为单独的函数。

let btnStart = document.getElementById("start");
let btnPause = document.getElementById("pause");
let btnClear = document.getElementById("clear");
let totalTimer = document.getElementById("totalTimer");
let i = 0,
j = 0,
h = 0,
k = 0;
let time = k.toString() + h + ":" + j + i;
let intervalI, intervalJ
totalTimer.innerText = time;
btnPause.addEventListener("click", (e) => {
clearInterval(intervalI);
clearInterval(intervalJ);
})
btnClear.addEventListener("click", (e) => {
i = 0, j = 0
time = "00:00"
totalTimer.innerText = time;
clearInterval(intervalI);
clearInterval(intervalJ);
})
btnStart.addEventListener("click", (e) => {
i = i++;
intervalI = setInterval(function() {
time = k.toString() + h + ":" + j + i;
totalTimer.innerText = time;
if (i < 9) {
i++;
} else if (i == 9) {
i = 0;
}
}, 500);
intervalJ = setInterval(function() {
time = k.toString() + h + ":" + j + i;
totalTimer.innerText = time;
if (j < 6) {
j++;
} else {
j = 0;
}
}, 5000);
})

<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="clear">Clear</button>
<div id="totalTimer"></div>