자바스크립트의 timer와 관련된 Web APIs

callback 함수를 일정 시간에 따라 실행할 수 있도록 도와주는 API에 대해서 정리해둔다.

setTimeout(callback, millisecond)

두 번째 인자로 주어지는 millisecond 만큼 시간이 흐른 뒤에 callback 함수를 실행한다.

function callName(name){
	setTimeout(() => console.log(name + "님, 안녕하세요!"), 1000);
}
callName("HiHi");
// 1초 뒤 "HiHi님, 안녕하세요!" 가 출력된다.

clearTimeout(timerID)

• clearTimeout으로 setTimeout을 중간에 멈출 수 있다.
• 인자로 주어지는 timerID를 통해 중지한다.

const timer = setTimeout(() => console.log("사용자님, 안녕하세요!"), 1000);

clearTimeout(timer);
// 1초가 지나도, 몇시간이 지나도 콘솔에는 아무것도 출력되지 않는다.

setInterval(callback, millisecond)

두 번째 인자로 주어지는 시간을 간격으로 callback 함수가 계속 실행된다.

function callName(name){
	setInterval(() => console.log(name + "님, 안녕하세요!"), 1000);
}
callName("Good");
// 1초 마다 "Good님, 안녕하세요!" 가 반복적으로 출력된다.

• 다만 위의 함수는 멈출 수 없다.

clearInterval(timerId)

• setInterval로 계속 반복되 실행된 callback 함수를 멈추기 위해서 clearInterval을 사용할 수 있다.
• setInterval이 할당된 변수가 timerId가 될 수 있다.

let printName = setInterval(() => console.log("사용자님, 안녕하세요!"), 1000);
setTimeout(() => clearInterval(printName), 4500);
// 4초동안 1초마다 출력 후, 4.5초 뒤에 반복 실행이 끝난다.