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ň:

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

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

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

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

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

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

start.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:

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

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

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

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ň.

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

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let 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ň.

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

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let 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ň.

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

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let 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ň.

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

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let 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ň.

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ň.