JavaScript'de timer başlatmak we durdurmak üçin düwmeler

Indi iki sany düwme ýasalyň: birinjisine basylanyňda timer başlasyn, ikinjisine basylanyňda bolsa dursun. Bu ýerde hemişe bolşy ýaly aňsat bolmaz we bizi gözlemekde çetlik bar. Bu çetligiň esasy nähili dugunydygyny düşünmek üçin, kody döretmegi ädimler boýunça düşündirerin.

Şonuň üçin, iki sany düwmeçek ýasalyň:

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

Bu düwmeler üçin üýtgeýjilere salgylary alyň:

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

Birinji düwmä basylanyňda, onuň belgisini üýtgeýjide ýazyp, timer-i başlalyň:

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

Indi bolsa ikinji düwmä basylanyňda timer-i duruzalyň:

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

// Timer-i duruzýarys:
stop.addEventListener('click', function() {
  clearInterval(timerId);
});

Şeýle-de bolsa, ýokarda görkezilen kody işletmäge synanyşanyňyzdan soň, bizi täsir garaşýar: timer-i duruzmaga synanyşanyňyzdan soň, timerId üýtgeýjisi undefined deň ekenligi görünýär! Näme üçin şeýle boldy? Sebäbi timer-i başlanda biz timerId üýtgeýjisini start düwmesine baglanan funksiýanyň içinde ýerli etdik.

Bu meseleni çözmek üçin timerId üýtgeýjisini global edeliň - bu ýagdaýda ol hem timer-i başlatmak üçin funksiýada, hem-de duruzmak funksiýasynda elýeterli bolar:

javascriptlet timerId; // üýtgeýjini global edýäris

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

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

Задание 1

Başlangyçda 100 sanysyny saklaýan bir üýtgeýji berlen bolsun. Şeýle hem iki sany düwme bar. Birinji düwmä basylanyňda timer-i başlaň, şol timer her sekuntda üýtgeýjiniň bahasyny 1-e azaltmaly we täze bahasyny konsolde görkezmeli. Üýtgeýjiniň bahasy nola ýetende - timer-i duruzuň.

Ikinji düwmä basylanyňda timer-i duruzuň. Şeýle hem, ikinji düwme basylmadyk bolsa-da, üýtgeýjiniň bahasy nola ýetende timer-i duruzuň.

Задание 2

Belli bir programmist düwmä basylanyňda häzirki wagtlyk döwri konsolde görkezýän timer-i başlaýan kody ýazdy:

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

Kod işledilenden soň, şonda-da, duruzmak düwmesiniň işlemeýändigi bellendi. Kod ýazan şahsynyň ýalňyşlygyny düzediň.

Задание 3

Ýene bir programmist öňki meseleni çözmek üçin kod ýazdy:

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

Kod işledilenden soň, ýene-de, duruzmak düwmesiniň işlemeýändigi bellendi. Kod ýazan şahsynyň ýalňyşlygyny düzediň.

Задание 4

Ýene bir programmist öňki meseleni çözmek üçin kod ýazdy:

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

Kod işledilenden soň, ýene-de, duruzmak düwmesiniň işlemeýändigi bellendi. Kod ýazan şahsynyň ýalňyşlygyny düzediň.

Задание 5

Ýene bir programmist öňki meseleni çözmek üçin kod ýazdy:

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

Kod işledilenden soň, ýene-de, duruzmak düwmesiniň işlemeýändigi bellendi. Kod ýazan şahsynyň ýalňyşlygyny düzediň.

Задание 6

Teoretiki bölümde men tarapyndan görkezilen kod "start" düwmesine birnäçe gezek basyp bolýandygyny hasaba almaz. Bu meseleni düzetmek üçin "start" düwmesine basylanyňda, bu düwmä wakany çözüp aýyrmaly we "stop" düwmesine basylanyňda - ýene birikdirmeli bolýar. Bu meseleni düzediň.