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:
html<button id="start">start</button>
<button id="stop">stop</button>
Obținem referințele la aceste butoane în variabile:
javascriptlet start = document.querySelector('#start');
let stop = document.querySelector('#stop');
La click pe primul buton pornim cronometrul, înregistrându-i numărul într-o variabilă:
javascriptstart.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
Și acum oprim cronometrul la click pe al doilea buton:
javascriptstart.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:
javascriptlet 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:
html<input type="submit" id="start" value="start">
<input type="submit" id="stop" value="stop">javascriptlet 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:
html<input type="submit" id="start" value="start">
<input type="submit" id="stop" value="stop">javascriptlet 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:
html<input type="submit" id="start" value="start">
<input type="submit" id="stop" value="stop">javascriptlet 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:
html<input type="submit" id="start" value="start">
<input type="submit" id="stop" value="stop">javascriptlet 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.