有没有办法切换 setInterval

Question

I am just playing around with the setInterval function in JavaScript. I am wondering if there is a way to toggle the setInterval with an HTML button

This is my code.

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);

The problem is that the number starts counting when the page loads and not on a button click.

Please help

Answer 1

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

Answer 2

setInterval can be cancelled using clearInterval and the integer identifier returned when setInterval was called.

To toggle a setInterval -based counter, you simply need to toggle on the presence (or absence) of this identifier.

 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>