Butoane pentru pornirea și oprirea cronometrului în JavaScript

Să facem acum două butoane: la click pe primul să pornească cronometrul, iar la click pe al doilea - să se oprească. Aici deja lucrurile nu vor fi atât de simple și ne așteaptă o capcană. Pentru a înțelege esența acestei capcane, voi descrie crearea codului pas cu pas.

Așadar, facem două butoane:

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

Obținem referințele la aceste butoane în variabile:

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

La click pe primul buton pornim cronometrul, înregistrându-i numărul într-o variabilă:

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

Și acum oprim cronometrul la click pe al doilea buton:

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

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

Cu toate acestea, dacă încercăm să rulăm codul de mai sus, ne așteaptă o surpriză: la încercarea de a opri cronometrul se va dovedi că variabila timerId este egală cu undefined! De ce sa întâmplat asta? Pentru că la pornirea cronometrului am făcut variabila noastră timerId locală în interiorul funcției atașate butonului start.

Pentru a rezolva problema, să facem variabila timerId globală - în acest caz ea va fi accesibilă atât în funcția de pornire a cronometrului, cât și în funcția de oprire:

let timerId; // facem variabila globală

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

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

Să presupunem că avem o variabilă în care inițial este stocat numărul 100. Sunt date și două butoane. La click pe primul buton porniți un cronometru care la fiecare secundă va micșora valoarea variabilei cu 1 și va afișa valoarea nouă în consolă. Opriți cronometrul când valoarea variabilei atinge zero.

La click pe al doilea buton opriți cronometrul. De asemenea, opriți cronometrul dacă al doilea buton nu a fost apăsat, dar valoarea variabilei a atins zero.

Un anumit programator a scris cod care la click pe un buton pornește un cronometru, afișând în consolă momentul curent de timp:

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

După rularea codului, totuși, s-a dovedit că butonul de oprire nu funcționează. Corectați eroarea autorului codului.

Încă un programator a scris cod pentru rezolvarea sarcinii precedente:

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

După rularea codului, totuși, din nou s-a dovedit, că butonul de oprire nu funcționează. Corectați eroarea autorului codului.

Încă un programator a scris cod pentru rezolvarea sarcinii precedente:

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

După rularea codului, totuși, din nou s-a dovedit, că butonul de oprire nu funcționează. Corectați eroarea autorului codului.

Încă un programator a scris cod pentru rezolvarea sarcinii precedente:

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

După rularea codului, totuși, din nou s-a dovedit, că butonul de oprire nu funcționează. Corectați eroarea autorului codului.

Codul prezentat de mine în partea teoretică nu ține cont de faptul că pe butonul start se poate face mai multe click-uri. Pentru a corecta această problemă se poate la click pe butonul start să se dezactiveze evenimentul de la acest buton, iar la click pe butonul stop - să se reactiveze. Corectați problema.