JavaScript-də timer-i işə salmaq və dayandırmaq düymələri

Gəlin indi iki düymə edək: birincisinə kliklənəndə timer işləsin, ikincisinə kliklənəndə isə dayansın. Burada artıq hər şey o qədər də sadə olmayacaq və bizi sürpriz gözləyir. Bu sürprizin mahiyyətini anlamaq üçün kodu yaratmağı addım-addım yazaq.

Beləliklə, iki kiçik düymə edirik:

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

Bu düymələrə istinadları dəyişənlərə alırıq:

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

Birinci düyməyə kliklənəndə timer-i işə salırıq, onun nömrəsini dəyişənə yazırıq:

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

İndi isə timer-i ikinci düyməyə kliklənəndə dayandıraq:

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

// Timer-i dayandırırıq:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Lakin, yuxarıda göstərilən kodu işə salmağa cəhd etsək, bizi sürpriz gözləyir: timer-i dayandırmağa çalışanda məlum olacaq ki, timerId dəyişəni undefined-a bərabərdir! Niyə belə oldu? Çünki timer-i işə salanda biz timerId dəyişənimizi start düyməsinə bağlanmış funksiya daxilində lokal etdik.

Problemi həll etmək üçün timerId dəyişənini qlobal edək - bu halda o, həm timer-i işə salan funksiyada, həm də dayandıran funksiyada əlçatan olacaq:

let timerId; // dəyişəni qlobal edək

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

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

Tutaq ki, əvvəlcə 100 rəqəmini saxlayan bir dəyişən var. Həmçinin iki düymə var. Birinci düyməyə kliklənəndə hər saniyə dəyişənin qiymətini 1 azaldan və yeni qiyməti konsola çıxaran timer-i işə salın. Dəyişənin qiyməti sıfıra çatan kimi timer-i dayandırın.

İkinci düyməyə kliklənəndə timer-i dayandırın. Həmçinin, ikinci düyməyə kliklənməsə də, dəyişənin qiyməti sıfıra çatanda timer-i dayandırın.

Müəyyən proqramçı düyməyə kliklənəndə cari vaxtı konsola çıxaran timer-i işə salan kodu yazıb:

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

Lakin, kodu işə saldıqdan sonra məlum oldu ki, dayandırma düyməsi işləmir. Kodun müəllifinin səhvini düzəldin.

Başqa bir proqramçı da əvvəlki məsələni həll etmək üçün kod yazıb:

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

Lakin, kodu işə saldıqdan sonra yenə məlum oldu ki, dayandırma düyməsi işləmir. Kodun müəllifinin səhvini düzəldin.

Başqa bir proqramçı da əvvəlki məsələni həll etmək üçün kod yazıb:

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

Lakin, kodu işə saldıqdan sonra yenə məlum oldu ki, dayandırma düyməsi işləmir. Kodun müəllifinin səhvini düzəldin.

Başqa bir proqramçı da əvvəlki məsələni həll etmək üçün kod yazıb:

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

Lakin, kodu işə saldıqdan sonra yenə məlum oldu ki, dayandırma düyməsi işləmir. Kodun müəllifinin səhvini düzəldin.

Nəzəri hissədə təqdim etdiyim kod, start düyməsinə bir neçə dəfə klikləmək olmasını nəzərə almır. Bu problemi düzəltmək üçün start düyməsinə kliklənəndə bu düymədən hadisəni ayırmaq, stop düyməsinə kliklənəndə isə geri bərpa etmək olar. Problemi düzəldin.