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>

有没有一种方法可以切换setInterval

2 个答案: