Meervoudige klik op knop om timer te starten in JavaScript

De code die ik hierboven heb gegeven, heeft eigenlijk een bepaald probleem. Dit probleem manifesteert zich in het geval dat er meerdere keren op onze knop wordt geklikt. In dit geval zal elke klik leiden tot het starten van een nieuwe timer.

Dat wil zeggen, bijvoorbeeld, drie keer op de knop klikken zal ertoe leiden dat er drie timers worden gestart, en elk van deze timers zal de tellerwaarde naar de console uitvoeren. Dit betekent dat de waarden drie keer zo snel zullen veranderen!

Om het beschreven probleem op te lossen, hoeft u alleen maar te zorgen dat herhaaldelijk klikken op de knop niet leidt tot een nieuwe start van de timer. Bijvoorbeeld, kan men na het starten van de timer de gebonden klikhandler van de knop loskoppelen:

let start = document.querySelector('#start');

start.addEventListener('click', function func() {
	let i = 0;
	
	setInterval(function() {
		console.log(++i);
	}, 1000);
	
	this.removeEventListener('click', func); // koppel handler los
});

Neem uw oplossing van de vorige taak. Controleer of meervoudig klikken op de knop leidt tot een versnelling van de telling. Los dit probleem op.