ปุ่มสำหรับเริ่มและหยุดตัวจับเวลาใน JavaScript

ตอนนี้มาสร้างปุ่มสองปุ่มกัน: เมื่อกดปุ่มแรก ให้ตัวจับเวลาเริ่มทำงาน และเมื่อกดปุ่มที่สอง ให้หยุด ที่นี่ทุกอย่างจะไม่ง่ายเหมือนเดิม และมีข้อผิดพลาดรอเราอยู่ เพื่อให้เข้าใจแก่นแท้ของข้อผิดพลาดนี้ ผมจะอธิบายการสร้างโค้ดเป็นขั้นตอน

ดังนั้น เรามาสร้างปุ่มสองปุ่มเล็กๆ:

<button id="start">start</button>
<button id="stop">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="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);
});

อย่างไรก็ตาม หลังจากรันโค้ดแล้ว ปรากฏว่า ปุ่มหยุดไม่ทำงาน แก้ไขข้อผิดพลาดของผู้เขียนโค้ด

โปรแกรมเมอร์อีกคนยังเขียนโค้ดสำหรับ แก้ไขโจทย์ก่อนหน้า:

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

อย่างไรก็ตาม หลังจากรันโค้ดแล้ว ปรากฏอีกครั้งว่า ปุ่มหยุดไม่ทำงาน แก้ไขข้อผิดพลาด ของผู้เขียนโค้ด

โปรแกรมเมอร์อีกคนยังเขียนโค้ดสำหรับ แก้ไขโจทย์ก่อนหน้า:

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

โปรแกรมเมอร์อีกคนยังเขียนโค้ดสำหรับ แก้ไขโจทย์ก่อนหน้า:

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

โค้ดที่ผมให้ไว้ในส่วนทฤษฎี ไม่ได้คำนึงถึงว่า ปุ่มเริ่มสามารถ ถูกกดได้หลายครั้ง เพื่อแก้ไข ปัญหานี้ เมื่อกดปุ่มเริ่ม สามารถถอดการผูกเหตุการณ์ออกจากปุ่มนี้ได้ และเมื่อกดปุ่มหยุด - ให้ผูกกลับ แก้ไขปัญหานี้