Schaltflächen zum Starten und Stoppen des Timers in JavaScript

Lassen Sie uns nun zwei Schaltflächen erstellen: Beim Klick auf die erste soll der Timer starten und beim Klick auf die zweite - stoppen. Hier wird es nicht mehr so einfach sein und es lauert eine Falle auf uns. Um das Wesen dieser Falle zu verstehen, werde ich die Erstellung des Codes Schritt für Schritt beschreiben.

Also, erstellen wir zwei Schaltflächen:

<button id="start">start</button>
<button id="stop">stop</button>

Wir holen Referenzen auf diese Schaltflächen in Variablen:

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

Beim Klick auf die erste Schaltfläche starten wir den Timer und speichern seine Nummer in einer Variable:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

Und jetzt stoppen wir den Timer beim Klick auf die zweite Schaltfläche:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

// Timer anhalten:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Wenn man jedoch versucht, den obigen Code auszuführen, erwartet uns eine Überraschung: Beim Versuch, den Timer zu stoppen, stellt sich heraus, dass die Variable timerId undefined ist! Warum ist das passiert? Weil wir beim Starten des Timers unsere Variable timerId lokal innerhalb der Funktion gemacht haben, die an die Schaltfläche start gebunden ist.

Um das Problem zu lösen, machen wir die Variable timerId global - in diesem Fall ist sie sowohl in der Funktion zum Starten des Timers als auch in der Funktion zum Stoppen verfügbar:

let timerId; // Variable global machen

start.addEventListener('click', function() {
	timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Angenommen, es gibt eine Variable, in der initial die Zahl 100 gespeichert ist. Es gibt auch zwei Schaltflächen. Beim Klick auf die erste Schaltfläche starten Sie einen Timer, der jede Sekunde den Wert der Variable um 1 verringert und den neuen Wert in der Konsole ausgibt. Sobald der Wert der Variable Null erreicht - stoppen Sie den Timer.

Beim Klick auf die zweite Schaltfläche stoppen Sie den Timer. Stoppen Sie den Timer auch, wenn die zweite Schaltfläche nicht gedrückt wurde, aber der Wert der Variable Null erreicht hat.

Ein gewisser Programmierer schrieb einen Code, der beim Klick auf eine Schaltfläche einen Timer startet, der den aktuellen Zeitpunkt in die Konsole ausgibt:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

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

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Nach dem Starten des Codes stellte sich jedoch heraus, dass die Stopp-Schaltfläche nicht funktioniert. Korrigieren Sie den Fehler des Autors des Codes.

Ein weiterer Programmierer schrieb ebenfalls einen Code für die Lösung der vorherigen Aufgabe:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

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

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Nach dem Starten des Codes stellte sich jedoch wieder heraus, dass die Stopp-Schaltfläche nicht funktioniert. Korrigieren Sie den Fehler des Autors des Codes.

Ein weiterer Programmierer schrieb ebenfalls einen Code für die Lösung der vorherigen Aufgabe:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

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

let timerId;

start.addEventListener('click', function() {
	setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Nach dem Starten des Codes stellte sich jedoch wieder heraus, dass die Stopp-Schaltfläche nicht funktioniert. Korrigieren Sie den Fehler des Autors des Codes.

Ein weiterer Programmierer schrieb ebenfalls einen Code für die Lösung der vorherigen Aufgabe:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

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

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval();
});

Nach dem Starten des Codes stellte sich jedoch wieder heraus, dass die Stopp-Schaltfläche nicht funktioniert. Korrigieren Sie den Fehler des Autors des Codes.

Der von mir im theoretischen Teil vorgestellte Code berücksichtigt nicht, dass die Start-Schaltfläche mehrmals gedrückt werden kann. Um dieses Problem zu beheben, kann man beim Klick auf die Start-Schaltfläche das Ereignis von dieser Schaltfläche entfernen und beim Klick auf die Stopp-Schaltfläche es wieder hinzufügen. Beheben Sie das Problem.