JavaScriptте таймерди баштоо жана токтотуу баскычтары

Эми эки баскыч жасайлы: биринчисин басканда таймер башталсын, экинчисин басканда токтоосун. Бул жерде баары анча деле жөнөкөй болбойт жана бизди таң калтыра турган нерсе күтөт. Бул таң калтыруунун мәнисин түшүнүү үчүн, код түзүүнү кадамдар менен жазайын.

Ошентип, эки кичинекей баскыч жасайбыз:

<button id="start">баштоо</button>
<button id="stop">токтотуу</button>

Бул баскычтарга өзгөрмөлөр аркылуу шилтеме алабыз:

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

Биринчи баскычты басканда, анын номерин өзгөрмөгө жазып, таймерди баштайбыз:

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

Эми экинчи баскычты басуу менен таймерди токтотолу:

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

// Таймерди токтото тузу:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Бирок, жогоруда келтирилген кодду иштетүүгө аракет кылсак, бизди таң калтыруу күтөт: таймерди токтотууга аракет кылганда, timerId өзгөрмөсү undefined экендиги белгили болот! Бул эмне үчүн болду? Себеби, таймерди иштетүү учурунда биз timerId өзгөрмөбүздү start баскычына байланышкан функциянын ичиндеги жергиликтүү кылып жасадык.

Маселени чечүү үчүн, timerId өзгөрмөсүн жалпы (глобалдык) кылалы - бул учурда ал таймерди баштоо функциясында да, токтотуу функциясында да жеткиликтүү болот:

let timerId; // өзгөрмөнү жалпы (глобалдык) кылабыз

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

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

Башында 100 санын сактоочу өзгөрмө берилди дейли. Ошондой эле эки баскыч берилди. Биринчи баскычты басуу менен таймерди иштетиңиз, ал ар бир секунд сайын өзгөрмөнүн маанисин 1ге азайтып, жаңы маанини консольго чыгарып туруш керек. Өзгөрмөнүн мааниси нөлгө жеткенде - таймерди токтотуңуз.

Экинчи баскычты басуу менен таймерди токтотуңуз. Ошондой эле таймерди токтотуңуз, эгерде экинчи баскыч басылбаса да, бирок өзгөрмөнүн мааниси нөлгө жетсе.

Кээ бир программист баскычты басуу менен учурдагы убакытты консольго чыгарып туруучу таймерди иштете турган код жазды:

<input type="submit" id="start" value="баштоо">
<input type="submit" id="stop"  value="токтотуу">

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

Кодду иштеткенден кийин, бирок, токтотуу баскычы иштебей турганы белгили болду. Коддун авторунун катасын оңдоп бериңиз.

Дагы бир программист мурунку маселени чечүү үчүн код жазды:

<input type="submit" id="start" value="баштоо">
<input type="submit" id="stop"  value="токтотуу">

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

Кодду иштеткенден кийин, бирок, дагы эле токтотуу баскычы иштебей турганы белгили болду. Коддун авторунун катасын оңдоп бериңиз.

Дагы бир программист мурунку маселени чечүү үчүн код жазды:

<input type="submit" id="start" value="баштоо">
<input type="submit" id="stop"  value="токтотуу">

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

Дагы бир программист мурунку маселени чечүү үчүн код жазды:

<input type="submit" id="start" value="баштоо">
<input type="submit" id="stop"  value="токтотуу">

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

Теориялык бөлүмдө мен келтирген код "баштоо" баскычына бир нече жолу басууга мүмкүн экендигин эске алган эмес. Бул маселени оңдоо үчүн, "баштоо" баскычын басканда ошол баскычтан окуяны ажыратып, "токтотуу" баскычын басканда кайра байланыштырса болот. Маселени оңдоп бериңиз.