JavaScript-da Taymerni Ishga Tushirish va To'xtatish Tugmalari

Keling, endi ikkita tugma yarataylik: birinchisini bosish orqali taymer ishga tushsin, ikkinchisini bosish orqali esa to'xtasin. Bu yerda hammasi unchalik oddiy bo'lmaydi va bizni tog'riq kutmoqda. Ushbu tog'riqning mohiyatini tushunish uchun kod yaratishni bosqichma-bosqich tasvirlab beraman.

Shunday qilib, ikkita tugmacha yaratamiz:

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

Ushbu tugmalarga havolalarni o'zgaruvchilarga olamiz:

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

Birinchi tugmani bosish orqali taymerni ishga tushiramiz, uning raqamini o'zgaruvchiga yozamiz:

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

Endi esa taymerni ikkinchi tugmani bosish orqali to'xtatamiz:

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

// Taymerni to'xtatamiz:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Biroq, yuqorida keltirilgan kodni ishga tushirishga harakat qilsak, bizni kutilmagan holat kutadi: taymerni to'xtatishga urinishda timerId o'zgaruvchisi undefined ekanligi ma'lum bo'ladi! Nima uchun bunday bo'ldi? Chunki taymerni ishga tushirganda, biz timerId o'zgaruvchisini start tugmasiga bog'langan funksiya ichida mahalliylashtirdik.

Muammoni hal qilish uchun timerId o'zgaruvchisini global qilamiz - bu holda u ham taymerni ishga tushirish funksiyasida, ham to'xtatish funksiyasida mavjud bo'ladi:

let timerId; // o'zgaruvchini global qilamiz

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

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

Faraz qilaylik, sizda dastlab 100 soni saqlanadigan o'zgaruvchi mavjud. Shuningdek, ikkita tugma bor. Birinchi tugmasini bosish orqali taymerni ishga tushiring, u har soniyada o'zgaruvchining qiymatini 1 ga kamaytirsin va yangi qiymatni konsolga chiqarsin. O'zgaruvchining qiymati nolga yetgach - taymerni to'xtating.

Ikkinchi tugmasini bosish orqali taymerni to'xtating. Shuningdek, agar ikkinchi tugma bosilmasa, lekin o'zgaruvchining qiymati nolga yetgan bo'lsa, taymerni to'xtating.

Ma'lum bir dasturchi tugmani bosish orqali ishlaydigan, joriy vaqtni konsolga chiqaruvchi taymer kodini yozgan:

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

Kodni ishga tushirgandan so'ng, biroq, ma'lum bo'ldiki, to'xtatish tugmasi ishlamaydi. Kod muallifining xatosini tuzating.

Yana bir dasturchi ham oldingi masalani yechish uchun kod yozgan:

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

Kodni ishga tushirgandan so'ng, biroq, yana ma'lum bo'ldiki, to'xtatish tugmasi ishlamaydi. Kod muallifining xatosini tuzating.

Yana bir dasturchi ham oldingi masalani yechish uchun kod yozgan:

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

Kodni ishga tushirgandan so'ng, biroq, yana ma'lum bo'ldiki, to'xtatish tugmasi ishlamaydi. Kod muallifining xatosini tuzating.

Yana bir dasturchi ham oldingi masalani yechish uchun kod yozgan:

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

Kodni ishga tushirgandan so'ng, biroq, yana ma'lum bo'ldiki, to'xtatish tugmasi ishlamaydi. Kod muallifining xatosini tuzating.

Nazariy qismda men keltirgan kod start tugmasiga bir necha marta bosish mumkinligini hisobga olmaydi. Ushbu muammoni tuzatish uchun start tugmasini bosish orqali ushbu tugmadagi hodisani bog'lamaslik, stop tugmasini bosish orqali esa qayta bog'lash mumkin. Muammoni tuzating.