Vícenásobné kliknutí na tlačítko pro spuštění časovače v JavaScriptu

Kód, který jsem uvedl výše, má ve skutečnosti jistý problém. Tento problém se projeví v případě, že na naše tlačítko provedeme několik kliknutí. V tomto případě každé kliknutí povede ke spuštění nového časovače.

To znamená, že například tři kliknutí na tlačítko povedou k tomu, že se spustí tři časovače, a každý z těchto časovačů bude vypisovat hodnotu čítače do konzole. To znamená, že hodnoty se budou měnit třikrát rychleji!

Pro vyřešení popsaného problému je třeba jednoduše zařídit, aby opakované kliknutí na tlačítko nevedlo k novému spuštění časovače. Například, lze po startu časovače odpojit od tlačítka navázanou obslužnou rutinu kliknutí:

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

start.addEventListener('click', function func() {
	let i = 0;
	
	setInterval(function() {
		console.log(++i);
	}, 1000);
	
	this.removeEventListener('click', func); // odpojíme obslužnou rutinu
});

Vezměte vaše řešení předchozí úlohy. Ověřte, že vícenásobné kliknutí na tlačítko vede ke zrychlení odpočtu. Opravte tento problém.