Ajastimen käynnistys- ja pysäytyspainikkeet JavaScriptillä

Tehdään nyt kaksi painiketta: ensimmäistä painaessa ajastin käynnistyy ja toista painaessa se pysähtyy. Tässä tilanteessa kaikki ei olekaan niin yksinkertaista ja meitä odottaa sudenkuoppa. Ymmärtääksemme tämän sudenkuopan olemuksen, kuvataan koodin luomista vaiheittain.

Joten, tehdään kaksi pientä painiketta:

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

Saadaan viittaukset näihin painikkeisiin muuttujiin:

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

Painaessa ensimmäistä painiketta käynnistetään ajastin, tallentaen sen numeron muuttujaan:

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

Ja nyt pysäytetään ajastin toista painiketta painaessa:

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

// Pysäytetään ajastin:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Kuitenkin, jos yritämme suorittaa yllä olevaa koodia, meitä odottaa yllätys: yrittäessä pysäyttää ajastin huomaamme, että muuttuja timerId on yhtä kuin undefined! Miksi näin kävi? Koska ajastinta käynnistettessään teimme muuttujastamme timerId paikallisen start-painikkeen liitetyn funktion sisällä.

Ongelman ratkaisemiseksi teemme muuttujasta timerId globaalin - tällöin se on saatavilla sekä ajastimen käynnistys- että pysäytysfunktioissa:

javascriptlet timerId; // tehdään muuttujasta globaali

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

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

Задание 1

Olkoon annettu muuttuja, jossa aluksi säilötään numero 100. Annettu on myös kaksi painiketta. Painaessa ensimmäistä painiketta käynnistetään ajastin, joka joka sekunti vähentää muuttujan arvoa 1:llä ja tulostaa uuden arvon konsoliin. Heti kun muuttujan arvo saavuttaa nollan - pysäytetään ajastin.

Painaessa toista painiketta pysäytetään ajastin. Pysäytä myös ajastin, jos toista painiketta ei painettu, mutta muuttujan arvo saavutti nollan.

Задание 2

Eräs ohjelmoija kirjoitti koodin, joka painaessa painiketta käynnistää ajastimen, joka tulostaa konsoliin nykyisen ajanhetken:

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

Koodin käynnistyksen jälkeen kuitenkin kävi ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Задание 3

Toinen ohjelmoija kirjoitti myös koodin edellisen tehtävän ratkaisemiseksi:

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

Koodin käynnistyksen jälkeen kuitenkin kävi jälleen ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Задание 4

Toinen ohjelmoija kirjoitti myös koodin edellisen tehtävän ratkaisemiseksi:

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

Koodin käynnistyksen jälkeen kuitenkin kävi jälleen ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Задание 5

Toinen ohjelmoija kirjoitti myös koodin edellisen tehtävän ratkaisemiseksi:

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

Koodin käynnistyksen jälkeen kuitenkin kävi jälleen ilmi, että pysäytyspainike ei toimi. Korjaa koodin tekijän virhe.

Задание 6

Teoreettisessa osassa esittämäni koodi ei ota huomioon sitä, että start-painikkeeseen voidaan tehdä useita painalluksia. Tämän ongelman korjaamiseksi voidaan start-painiketta painaessa irroittaa tapahtuma tästä painikkeesta, ja stop-painiketta painaessa liittää se takaisin. Korjaa ongelma.