Mehrfaches Klicken auf einen Button zum Starten eines Timers in JavaScript
Der von mir oben angeführte Code hat tatsächlich ein gewisses Problem. Dieses Problem zeigt sich in dem Fall, wenn auf unseren Button mehrere Klicks gemacht werden. In diesem Fall wird jeder Klick zum Starten eines neuen Timers führen.
Das heißt, zum Beispiel führen drei Klicks auf den Button dazu, dass drei Timer gestartet werden, und jeder dieser Timer wird den Zählerwert in der Konsole ausgeben. Das bedeutet, dass sich die Werte dreimal schneller ändern werden!
Um das beschriebene Problem zu lösen, muss man einfach machen, dass ein erneuter Klick auf den Button nicht zu einem neuen Start des Timers führt. Zum Beispiel kann man nach dem Start des Timers den gebundenen Klick-Handler von der Schaltfläche lösen:
let start = document.querySelector('#start');
start.addEventListener('click', function func() {
let i = 0;
setInterval(function() {
console.log(++i);
}, 1000);
this.removeEventListener('click', func); // Handler lösen
});
Nehmen Sie Ihre Lösung der vorherigen Aufgabe. Prüfen Sie, dass mehrfaches Klicken auf den Button zu einer Beschleunigung der Zählung führt. Korrigieren Sie dieses Problem.
