Pogas JavaScript taimera palaišanai un apturēšanai

Tagad izveidosim divas pogas: nospiežot uz pirmās, lai taimers startē, un nospiežot uz otrās - apstājas. Šeit viss vairs nebūs tik vienkārši, un mūs sagaida lamatas. Lai saprastu šo lamatu būtību, izklāstīšu koda izveidi pa soļiem.

Tātad, izveidojam divas pogas:

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

Iegūstam atsauces uz šīm pogām mainīgajos:

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

Nospiežot uz pirmās pogas, startējam taimeri, ierakstot tā numuru mainīgajā:

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

Un tagad apstādinām taimeri, nospiežot uz otrās pogas:

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

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

Tomēr, ja mēģināt palaist iepriekš minēto kodu, mūs sagaida pārsteigums: mēģinot apturēt taimeri, izrādīsies, ka mainīgais timerId ir vienāds ar undefined! Kāpēc tas notika? Tāpēc, ka palaižot taimeri, mēs padarījām mūsu mainīgo timerId lokālu iekšpusē funkcijas, kas piesaistīta pogai start.

Lai atrisinātu problēmu, padarīsim mainīgo timerId globālu - šajā gadījumā tas būs pieejams gan taimera palaišanas funkcijā, gan arī apstāšanas funkcijā:

let timerId; // padarām mainīgo globālu

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

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

Ir dots mainīgais, kurā sākotnēji tiek glabāts skaitlis 100. Dotas arī divas pogas. Nospiežot uz pirmās pogas, palaidiet taimeri, kas katru sekundi samazinās mainīgā vērtību par 1 un izvadīs jauno vērtību konsolē. Tiklīdz mainīgā vērtība sasniedz nulli - apstādiniet taimeri.

Nospiežot uz otrās pogas, apstādiniet taimeri. Apstādiniet arī taimeri, ja otrā poga netika nospiesta, bet mainīgā vērtība sasniedza nulli.

Kāds programmētājs uzrakstīja kodu, kas nospiežot uz pogas, palaiž taimeri, izvadot konsolē pašreizējo laika momentu:

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

Pēc koda palaišanas, tomēr, izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Vēl viens programmētājs arī uzrakstīja kodu iepriekšējās problēmas risināšanai:

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

Pēc koda palaišanas, tomēr, atkal izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Vēl viens programmētājs arī uzrakstīja kodu iepriekšējās problēmas risināšanai:

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

Pēc koda palaišanas, tomēr, atkal izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Vēl viens programmētājs arī uzrakstīja kodu iepriekšējās problēmas risināšanai:

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

Pēc koda palaišanas, tomēr, atkal izrādījās, ka apstāšanas poga nedarbojas. Izlabojiet koda autora kļūdu.

Manis teorētiskajā daļā dotais kods neņem vērā to, ka uz starta pogu var veikt vairākus nospiešanus. Lai izlabotu šo problēmu, var, nospiežot uz starta pogas, noņemt notikuma piesaisti no šīs pogas, un, nospiežot uz stop pogas - piesaistīt atpakaļ. Izlabojiet problēmu.