有没有办法切换 setInterval

Question

我只是在玩 JavaScript 中的 setInterval 函数。 我想知道是否有办法用 HTML 按钮切换 setInterval

这是我的代码。

let x = 0;
const listener = document.getElementById('listener');
const numberPlace = document.getElementById('numberPlace');

const numberCounter = setInterval(() => {
  x++;
  numberPlace.innerHTML = x;
}, 100);

listener.addEventListener('click', numberCounter);

问题是该数字在页面加载时开始计数，而不是在单击按钮时开始计数。

请帮忙

Answer 1

const numberCounter = () => setInterval(() => {
  x++;
  numberPlace.innerHTML = x;
}, 100);

Answer 2

setInterval可以使用取消clearInterval并且当标识符返回的整数setInterval被调用。

要切换基于setInterval的计数器，您只需切换此标识符是否存在（或不存在）。

 let counter = 0; let intervalId = null; const btn = document.getElementById('btn'); const numberPlace = document.getElementById('numberPlace'); const numberCounter = () => intervalId === null ? intervalId = setInterval(() => numberPlace.innerHTML = ++counter, 100) : (clearInterval(intervalId), intervalId = null) btn.addEventListener('click', numberCounter);

 <button id="btn">toggle</button> <div id="numberPlace"></div>