Vifungo vya kuanzisha na kusitisha timer katika JavaScript

Hebu sasa tutengeneze vifungo viwili: kubonyeza kifungo cha kwanza timer ianze, na kubonyeza kifungo cha pili timer isimame. Hapa hatua zote zitakuwa si rahisi na tutakumbana na changamoto. Ili kuelewa asili ya changamoto hii, nitaandaa mchakato wa kuunda msimbo hatua kwa hatua.

Kwa hiyo, tutengeneze vifungo viwili vidogo:

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

Tutapata viungo kwenye vifungo hivi na kuvihifadhi katika vigeu:

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

Kwa kubonyeza kifungo cha kwanza, timer itaanza, na nambari yake itahifadhiwa kwenye kigeu:

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

Na sasa timer itasimamishwa kwa kubonyeza kifungo cha pili:

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

// Tunasimamisha timer:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Hata hivyo, ukijaribu kukimbia msimbo ulio hapo juu, tutakumbana na mshangao: unapojaribu kusimamisha timer, utagundua kuwa kigeu timerId kina thamani undefined! Kwa nini hii ilitokea? Kwa sababu wakati wa kuanzisha timer, tulifanya kigeu chetu timerId kiwe cha ndani kabisa (local) ndani ya kitendakazi kilichounganishwa na kifungo start.

Ili kutatua tatizo hili, tutafanya kigeu timerId kiwe cha kimataifa (global) - kwa hali hii kitapatikana kwenye kitendakazi cha kuanzisha timer na pia kwenye kitendakazi cha kuisimamisha:

let timerId; // tutafanya kigeu kiwe cha kimataifa

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

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

Hebu tuchukulie kuna kigeu ambacho awali kina thamani 100. Pia kuna vifungo viwili. Kwa kubonyeza kifungo cha kwanza, anzisha timer ambayo kila sekonda itapunguza thamani ya kigeu kwa 1 na kuchapisha thamani mpya kwenye konsole. Punde tu thamani ya kigeu ikifika 0 - simamisha timer.

Kwa kubonyeza kifungo cha pili, simamisha timer. Pia simamisha timer ikiwa kifungo cha pili hakikubonywa, lakini thamani ya kigeu imefika 0.

Programu fulani aliandika msimbo ambao kwa kubonyeza kifungo huanzisha timer, ikichapisha wakati wa sasa kwenye konsole:

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

Baada ya kukimbia msimbo, hata hivyo, iligundulika kuwa kifungo cha kusimamisha hakifanyi kazi. Sahihisha makosa ya muandishi wa msimbo.

Programu mwingine pia aliandika msimbo wa kutatua tatizo la awali:

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

Baada ya kukimbia msimbo, hata hivyo, tena iligundulika kuwa kifungo cha kusimamisha hakifanyi kazi. Sahihisha makosa ya muandishi wa msimbo.

Programu mwingine pia aliandika msimbo wa kutatua tatizo la awali:

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

Baada ya kukimbia msimbo, hata hivyo, tena iligundulika kuwa kifungo cha kusimamisha hakifanyi kazi. Sahihisha makosa ya muandishi wa msimbo.

Programu mwingine pia aliandika msimbo wa kutatua tatizo la awali:

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

Baada ya kukimbia msimbo, hata hivyo, tena iligundulika kuwa kifungo cha kusimamisha hakifanyi kazi. Sahihisha makosa ya muandishi wa msimbo.

Msimbo niliowasilisha katika sehemu ya kinachotakiwa hauzingatii kwamba kifungo cha kuanzisha kinaweza kubonyezwa mara nyingi. Ili kurekebisha tatizo hili, kwa kubonyeza kifungo cha kuanzisha, tunaweza kuondoa tukio kutoka kwenye kifungo hicho, na kwa kubonyeza kifungo cha kusimamisha - turudishe tukio nyuma. Sahihisha tatizo hili.