JavaScript 타이머 중지하기

타이머를 시작하는 방법을 이미 알고 있습니다. 이제 타이머를 중지하는 방법을 배워봅시다. 이를 위해, setInterval 함수를 사용하여 시작된 각 타이머는 고유 번호를 가진다는 것을 알아야 합니다. 이 번호는 타이머가 시작될 때 setInterval 함수가 반환합니다:

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

alert(timerId); // 타이머 번호 출력

타이머를 중지하기 위해 clearInterval 함수가 사용됩니다. 이 함수는 중지해야 할 타이머의 고유 번호를 매개변수로 받습니다.

예를 들어, 1부터 시작하여 숫자를 증가시키며 콘솔에 출력하는 타이머를 시작해 봅시다. 숫자 10이 화면에 출력되면 타이머를 중지합니다:

let i = 0;

let timerId = setInterval(function() {
	console.log(++i);
	
	if (i >= 10) {
		clearInterval(timerId);
	}
}, 1000);

초기에 숫자 10이 저장된 변수가 주어졌습니다. 매초 이 변수의 값을 1씩 감소시키고 그 값을 콘솔에 출력하는 타이머를 시작하세요. 변수의 값이 0에 도달하면 타이머를 중지하세요.