Mygtukai laikmačio paleidimui ir sustabdymui JavaScript

Dabar sukurkime du mygtukus: paspaudus pirmąjį, laikmatis turėtų pasileisti, o paspaudus antrajį - sustoti. Čia jau viskas bus ne taip paprasta ir mūsų lauja spąstai. Kad suprastume šių spąstų esmę, aprašysime kodo kūrimą žingsnis po žingsnio.

Taigi, darome du mygtukus:

html<button id="start">pradėti</button>
<button id="stop">sustabdyti</button>

Gauname nuorodas į šiuos mygtukus į kintamuosius:

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

Paspaudus pirmąjį mygtuką, paleidžiame laikmatį, įrašant jo numerį į kintamąjį:

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

O dabar sustabdome laikmatį paspaudus antrajį mygtuką:

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

// Sustabdome laikmatį:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Tačiau, jei bandysite paleisti aukščiau pateiktą kodą, mūsų laukia staigmena: bandant sustabdyti laikmatį paaiškės, kad kintamasis timerId yra lygus undefined! Kodėl taip atsitiko? Nes paleisdami laikmatį mes padarėme savo kintamąjį timerId lokaliu funkcijos viduje, pririšto prie mygtuko start.

Problemai spręsti padarykime kintamąjį timerId globaliu - tokiu atveju jis bus prieinamas tiek laikmačio paleidimo funkcijoje, tiek sustabdymo funkcijoje:

javascriptlet timerId; // padarykime kintamąjį globalų

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

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

Задание 1

Tegu duotas kintamasis, kuriame iš pradžių saugomas skaičius 100. Duoti ir du mygtukai. Paspaudus pirmąjį mygtuką, paleiskite laikmatį, kuris kas sekundę mažins kintamojo reikšmę 1 ir išves naują reikšmę į konsolę. Kai tik kintamojo reikšmė pasieks nulį - sustabdykite laikmatį.

Paspaudus antrajį mygtuką sustabdykite laikmatį. Taip pat sustabdykite laikmatį, jei antrasis mygtukas nebuvo paspaustas, bet kintamojo reikšmė pasiekė nulį.

Задание 2

Kažkoks programuotojas parašė kodą, kuris paspaudus mygtuką paleidžia laikmatį, išvedantį į konsolę esamą laiko momentą:

html<input type="submit" id="start" value="pradėti">
<input type="submit" id="stop"  value="sustabdyti">

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

Paleidus kodą, vis dėlto, paaiškėjo, kad sustabdymo mygtukas neveikia. Ištaisykite autoriaus kodo klaidą.

Задание 3

Kitas programuotojas taip pat parašė kodą ankstesnei užduočiai išspręsti:

html<input type="submit" id="start" value="pradėti">
<input type="submit" id="stop"  value="sustabdyti">

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

Paleidus kodą, vis dėlto, vėl paaiškėjo, kad sustabdymo mygtukas neveikia. Ištaisykite autoriaus kodo klaidą.

Задание 4

Kitas programuotojas taip pat parašė kodą ankstesnei užduočiai išspręsti:

html<input type="submit" id="start" value="pradėti">
<input type="submit" id="stop"  value="sustabdyti">

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

Paleidus kodą, vis dėlto, vėl paaiškėjo, kad sustabdymo mygtukas neveikia. Ištaisykite autoriaus kodo klaidą.

Задание 5

Kitas programuotojas taip pat parašė kodą ankstesnei užduočiai išspręsti:

html<input type="submit" id="start" value="pradėti">
<input type="submit" id="stop"  value="sustabdyti">

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

Paleidus kodą, vis dėlto, vėl paaiškėjo, kad sustabdymo mygtukas neveikia. Ištaisykite autoriaus kodo klaidą.

Задание 6

Mano teoriškai pateiktas kodas neatsižvelgia į tai, kad ant start mygtuko galima paspauskti kelis kartus. Šiai problemai išspręsti galima paspaudus start mygtuką atjungti įvykį nuo šio mygtuko, o paspaudus stop mygtuką - prijungti atgal. Ištaisykite problemą.