Boutons pour démarrer et arrêter un minuteur en JavaScript

Maintenant, créons deux boutons : au clic sur le premier, le minuteur démarre, et au clic sur le second, il s'arrête. Les choses ne seront pas si simples ici et une difficulté nous attend. Pour comprendre l'essence de cette difficulté, je vais détailler la création du code étape par étape.

Alors, faisons deux petits boutons :

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

Obtenons les références à ces boutons dans des variables :

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

Au clic sur le premier bouton, démarrons le minuteur, en enregistrant son identifiant dans une variable :

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

Et maintenant, arrêtons le minuteur au clic sur le second bouton :

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

// Arrêtons le minuteur :
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Cependant, si vous essayez d'exécuter le code ci-dessus, une surprise nous attend : en essayant d'arrêter le minuteur, il s'avère que la variable timerId est égale à undefined ! Pourquoi cela s'est-il produit ? Parce qu'en démarrant le minuteur, nous avons rendu notre variable timerId locale à l'intérieur de la fonction liée au bouton start.

Pour résoudre le problème, rendons la variable timerId globale - ainsi, elle sera accessible à la fois dans la fonction de démarrage du minuteur et dans la fonction d'arrêt :

let timerId; // rendons la variable globale

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

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

Supposons qu'une variable soit donnée, contenant initialement le nombre 100. Deux boutons sont également donnés. Au clic sur le premier bouton, démarrez un minuteur qui diminuera la valeur de la variable de 1 chaque seconde et affichera la nouvelle valeur dans la console. Dès que la valeur de la variable atteint zéro - arrêtez le minuteur.

Au clic sur le second bouton, arrêtez le minuteur. Arrêtez également le minuteur si le second bouton n'a pas été cliqué, mais que la valeur de la variable a atteint zéro.

Un certain programmeur a écrit un code qui, au clic sur un bouton, démarre un minuteur affichant dans la console l'heure actuelle :

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

Après l'exécution du code, cependant, il s'est avéré que le bouton d'arrêt ne fonctionne pas. Corrigez l'erreur de l'auteur du code.

Un autre programmeur a également écrit un code pour résoudre la tâche précédente :

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

Après l'exécution du code, cependant, il s'est encore avéré que le bouton d'arrêt ne fonctionne pas. Corrigez l'erreur de l'auteur du code.

Un autre programmeur a également écrit un code pour résoudre la tâche précédente :

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

Après l'exécution du code, cependant, il s'est encore avéré que le bouton d'arrêt ne fonctionne pas. Corrigez l'erreur de l'auteur du code.

Un autre programmeur a également écrit un code pour résoudre la tâche précédente :

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

Après l'exécution du code, cependant, il s'est encore avéré que le bouton d'arrêt ne fonctionne pas. Corrigez l'erreur de l'auteur du code.

Le code que j'ai présenté dans la partie théorique ne tient pas compte du fait que le bouton de démarrage peut être cliqué plusieurs fois. Pour corriger cette problématique, on peut, au clic sur le bouton de démarrage, détacher l'événement de ce bouton, et au clic sur le bouton d'arrêt - le rattacher à nouveau. Corrigez ce problème.