Butang untuk Memulakan dan Menghentikan Pemetik masa pada JavaScript

Sekarang mari kita buat dua butang: apabila ditekan butang pertama, pemetik masa akan bermula, dan apabila butang kedua ditekan - ia akan berhenti. Di sini segala-galanya tidak akan semudah itu dan kita akan menghadapi kekecewaan. Untuk memahami inti pati kekecewaan ini, saya akan menerangkan penciptaan kod langkah demi langkah.

Jadi, kita buat dua butang:

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

Dapatkan rujukan kepada butang ini dalam pembolehubah:

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

Apabila butang pertama ditekan, mulakan pemetik masa, dengan menulis nombornya dalam pembolehubah:

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

Dan sekarang hentikan pemetik masa apabila butang kedua ditekan:

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

// Hentikan pemetik masa:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Walau bagaimanapun, jika anda cuba menjalankan kod di atas, kami akan terkejut: apabila cuba menghentikan pemetik masa, ternyata pembolehubah timerId sama dengan undefined! Mengapa ini berlaku? Kerana apabila pemetik masa dilancarkan, kami menjadikan pembolehubah timerId kami setempat di dalam fungsi yang terikat pada butang start.

Untuk menyelesaikan masalah, mari kita jadikan pembolehubah timerId sebagai global - dalam kes ini, ia akan boleh diakses sama ada dalam fungsi permulaan pemetik masa mahupun dalam fungsi pemberhentian:

let timerId; // jadikan pembolehubah global

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

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

Katakan terdapat pembolehubah yang pada asalnya menyimpan nombor 100. Diberi juga dua butang. Apabila butang pertama ditekan, lancarkan pemetik masa yang setiap saat akan mengurangkan nilai pembolehubah sebanyak 1 dan memaparkan nilai baru dalam konsol. Sebaik sahaja nilai pembolehubah mencapai sifar - hentikan pemetik masa.

Apabila butang kedua ditekan, hentikan pemetik masa. Juga hentikan pemetik masa jika butang kedua tidak ditekan, tetapi nilai pembolehubah mencapai sifar.

Seorang pengaturcara menulis kod yang apabila butang ditekan, memulakan pemetik masa yang memaparkan masa semasa dalam konsol:

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

Selepas kod dilancarkan, bagaimanapun, ternyata butang berhenti tidak berfungsi. Betulkan kesilapan penulis kod.

Seorang pengaturcara lain juga menulis kod untuk menyelesaikan tugas sebelumnya:

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

Selepas kod dilancarkan, bagaimanapun, sekali lagi ternyata, butang berhenti tidak berfungsi. Betulkan kesilapan penulis kod.

Seorang pengaturcara lain juga menulis kod untuk menyelesaikan tugas sebelumnya:

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

Selepas kod dilancarkan, bagaimanapun, sekali lagi ternyata, butang berhenti tidak berfungsi. Betulkan kesilapan penulis kod.

Seorang pengaturcara lain juga menulis kod untuk menyelesaikan tugas sebelumnya:

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

Selepas kod dilancarkan, bagaimanapun, sekali lagi ternyata, butang berhenti tidak berfungsi. Betulkan kesilapan penulis kod.

Kod yang diberikan oleh saya dalam bahagian teori tidak mengambil kira fakta bahawa butang mula boleh ditekan beberapa kali. Untuk membetulkan masalah ini, apabila butang mula ditekan, kita boleh melepaskan acara dari butang itu, dan apabila butang berhenti ditekan - pasangkan semula. Betulkan masalah tersebut.