为什么我的 JavaScript 第二个计数器不起作用？答案

【问题标题】：Why is my JavaScript second counter not working?为什么我的 JavaScript 第二个计数器不起作用？
【发布时间】：2020-11-30 19:04:31
【问题描述】：

我用 JavaScript 制作了第二个计数器。但是我的代码不起作用。

我的问题：“首先我按下了开始按钮，但秒没有正常进行。”

这是我的代码：

var a = 0;
var Time = setInterval(Counter, 1000);
function startCounter() {
    setInterval(Counter, 1000);
}

function Counter() {
    a += 1;
    seconds.innerHTML = a;
}

function pauseCounter() {
    clearInterval(Time);
}

function resetCounter() {
    a = 0;
    seconds.innerHTML = a;
}

<button onclick="startCounter()">Start</button>
<br>
<button onclick="pauseCounter()">Pause</button>
<p>Seconds: <a id='seconds'>0</a></p>
<button onclick="resetCounter()">Reset</button>

【问题讨论】：

标签： javascript html counter

【解决方案1】：

代码中的问题如下：

setInterval(Counter, 1000);

在上面的行中，您正在创建一个间隔，但您没有将它分配给任何变量。所以它没有被取消。

在开始新的间隔之前，请务必清除最后一个。

您每次都需要将新的setInterval 分配给Time

var a = 0;
var Time;
function startCounter() {
    clearInterval(Time)
    Time = setInterval(Counter, 1000);
}

function Counter() {
    a += 1;
    seconds.innerHTML = a;
}

function pauseCounter() {
    clearInterval(Time);
}

function resetCounter() {
    a = 0;
    seconds.innerHTML = a;
}

<button onclick="startCounter()">Start</button>
<br>
<button onclick="pauseCounter()">Pause</button>
<p>Seconds: <a id='seconds'>0</a></p>
<button onclick="resetCounter()">Reset</button>

【讨论】：

这段代码有点问题。如果我按“开始”按钮 2 次，秒数不正常。如果我的问题有问题，您可以编辑我的问题。

【解决方案2】：

当您定义时间时，您将其设置为抢先式间隔，这意味着它会立即开始。而在startCounter() 中，您刚刚创建了一个无法清除的未命名区间。

var a = 0;
var Time;
function startCounter() {
    clearInterval(Time) // prevent multiple intervals at same time
    Time = setInterval(Counter, 1000);
}

function Counter() {
    a += 1;
    seconds.innerHTML = a;
}

function pauseCounter() {
    clearInterval(Time);
}

function resetCounter() {
    a = 0;
    seconds.innerHTML = a;
}

<body>
    <script src="index.js"></script>
    <button onclick="startCounter()">Start</button>
    <br>
    <button onclick="pauseCounter()">Pause</button>
    <p>Seconds: <a id='seconds'>0</a></p>
    <button onclick="resetCounter()">Reset</button>
  </body>

【讨论】：

不够 - 如果单击重置，我们会得到两个计数器
这段代码有点问题。如果我按“开始”按钮 2 次，秒数不正常。如果我的问题有问题，您可以编辑我的问题。
我在 setInterval 之前添加了一个 clearInterval，这样就不能一次有多个间隔。

【解决方案3】：

你需要清除间隔但也要使用 type=button 和 addEventListener

let a = 0;
let time;

let seconds;

window.addEventListener("load", function() {
  seconds = document.getElementById("seconds");
  document.getElementById("start").addEventListener("click", function() {
    clearInterval(time);
    time = setInterval(counter, 1000);
  });
  document.getElementById("pause").addEventListener("click", pauseCounter);
  document.getElementById("resetBut").addEventListener("click", resetCounter);
});

function counter() {
  a += 1;
  seconds.innerHTML = a;
}

function pauseCounter() {
  clearInterval(time);
}

function resetCounter() {
  a = 0;
  seconds.innerHTML = a;
}

<button type="button" id="start">Start</button>
<br>
<button type="button" id="pause">Pause</button>
<p>Seconds: <a id='seconds'>0</a></p>
<button type="button" id="resetBut">Reset</button>

【讨论】：

【解决方案4】：

你必须像这样设置秒对象。

seconds = document.getElementById('seconds')

【讨论】：

不是问题。页面上的 ID 也被 window.id 遮蔽，因此虽然不推荐，但秒可以工作