การคลิกปุ่มหลายครั้งเพื่อเริ่มตัวจับเวลาใน JavaScript

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

นั่นคือ ยกตัวอย่างเช่น การกดปุ่มสามครั้งจะทำให้ตัวจับเวลาทำงานสามตัว และตัวจับเวลาแต่ละตัวจะแสดงค่าตัวนับในคอนโซล นั่นหมายความว่าค่าจะเปลี่ยนแปลงเร็วขึ้นสามเท่า!

เพื่อแก้ปัญหาที่อธิบายไว้ แค่ต้องทำให้การกดปุ่มซ้ำอีกครั้งไม่ทำให้ตัวจับเวลาเริ่มทำงานใหม่ ตัวอย่างเช่น หลังจากเริ่มตัวจับเวลาแล้ว สามารถลบตัวจัดการเหตุการณ์คลิกที่ผูกไว้กับปุ่มออก:

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

start.addEventListener('click', function func() {
	let i = 0;
	
	setInterval(function() {
		console.log(++i);
	}, 1000);
	
	this.removeEventListener('click', func); // ลบตัวจัดการเหตุการณ์
});

นำวิธีแก้ปัญหาของคุณจากงานก่อนหน้ามา ตรวจสอบว่าการกดปุ่มหลายครั้งทำให้การนับเร็วขึ้น แก้ไขปัญหานี้