JavaScript에서 타이머 시작을 위한 버튼 다중 클릭

위에 제시한 코드는 실제로 일부 문제가 있습니다. 이 문제는 우리 버튼을 여러 번 클릭할 경우 나타납니다. 이 경우 각 클릭은 새 타이머를 시작하게 됩니다.

즉, 예를 들어, 버튼을 세 번 누르면 세 개의 타이머가 시작되고, 이 각 타이머는 콘솔에 카운터 값을 출력할 것입니다. 이는 값이 세 배 빠르게 변할 것임을 의미합니다!

설명된 문제를 해결하려면 단순히 버튼을 다시 눌러도 새 타이머가 시작되지 않도록 해야 합니다. 예를 들어, 타이머 시작 후 버튼에 연결된 클릭 핸들러를 해제할 수 있습니다:

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

start.addEventListener('click', function func() {
	let i = 0;
	
	setInterval(function() {
		console.log(++i);
	}, 1000);
	
	this.removeEventListener('click', func); // 핸들러를 해제합니다
});

이전 작업의 해결책을 가져오세요. 버튼을 여러 번 누르면 카운트가 가속화되는지 확인하세요. 이 문제를 수정하세요.