Pogas JavaScript taimera palaišanai un apturēšanai

Tagad izveidosim divas pogas: nospiežot uz pirmās, lai taimers startē, un nospiežot uz otrās - apstājas. Šeit viss vairs nebūs tik vienkārši, un mūs sagaida lamatas. Lai saprastu šo lamatu būtību, izklāstīšu koda izveidi pa soļiem.

Tātad, izveidojam divas pogas:

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

Iegūstam atsauces uz šīm pogām mainīgajos:

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

Nospiežot uz pirmās pogas, startējam taimeri, ierakstot tā numuru mainīgajā:

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

Un tagad apstādinām taimeri, nospiežot uz otrās pogas:

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

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

Tomēr, ja mēģināt palaist iepriekš minēto kodu, mūs sagaida pārsteigums: mēģinot apturēt taimeri, izrādīsies, ka mainīgais timerId ir vienāds ar undefined! Kāpēc tas notika? Tāpēc, ka palaižot taimeri, mēs padarījām mūsu mainīgo timerId lokālu iekšpusē funkcijas, kas piesaistīta pogai start.

Lai atrisinātu problēmu, padarīsim mainīgo timerId globālu - šajā gadījumā tas būs pieejams gan taimera palaišanas funkcijā, gan arī apstāšanas funkcijā:

javascriptlet timerId; // padarām mainīgo globālu

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

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

Задание 1

Ir dots mainīgais, kurā sākotnēji tiek glabāts skaitlis 100. Dotas arī divas pogas. Nospiežot uz pirmās pogas, palaidiet taimeri, kas katru sekundi samazinās mainīgā vērtību par 1 un izvadīs jauno vērtību konsolē. Tiklīdz mainīgā vērtība sasniedz nulli - apstādiniet taimeri.

Nospiežot uz otrās pogas, apstādiniet taimeri. Apstādiniet arī taimeri, ja otrā poga netika nospiesta, bet mainīgā vērtība sasniedza nulli.

Задание 2

Kāds programmētājs uzrakstīja kodu, kas nospiežot uz pogas, palaiž taimeri, izvadot konsolē pašreizējo laika momentu:

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

Pēc koda palaišanas, tomēr, izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Задание 3

Vēl viens programmētājs arī uzrakstīja kodu iepriekšējās problēmas risināšanai:

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

Pēc koda palaišanas, tomēr, atkal izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Задание 4

Vēl viens programmētājs arī uzrakstīja kodu iepriekšējās problēmas risināšanai:

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

Pēc koda palaišanas, tomēr, atkal izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Задание 5

Vēl viens programmētājs arī uzrakstīja kodu iepriekšējās problēmas risināšanai:

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

Pēc koda palaišanas, tomēr, atkal izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Задание 6

Manis teorētiskajā daļā dotais kods neņem vērā to, ka uz starta pogu var veikt vairākus nospiešanus. Lai izlabotu šo problēmu, var, nospiežot uz starta pogas, noņemt notikuma piesaisti no šīs pogas, un, nospiežot uz stop pogas - piesaistīt atpakaļ. Izlabojiet problēmu.