보통 함수를 명시적으로 호출하면 즉시 실행된다. 하지만 개발을 하다보면 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 함수를 호출하고 싶을 때가 있다. 자바스크립트에서는 함수 호출을 예약하려면 타이머 함수를 이용해야한다. 이를 호출 스케줄링이라고 한다.
자바스크립트에는 타이머를 생성, 제거 할 수 있는 함수를 제공한다.
setTimeout
/ clearTimeout
setInterval
/ clearInterval
이 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드이다. 또한, 호스트 객체이다.
setTimeout
은 타이머가 만료되면 한번만 호출setInterval
은 타이머가 만료될 때마다 반복 호출// 타이머 아이디를 반환
// 3초 뒤에 콜백 함수를 실행 => JongHun 출력
// 인자는 콜백함수 외 생략 가능
const timeoutId = setTimeout((name)=> {console.log(name)},3000,'JongHun');
// 콜백 함수 대신 문자열 코드 넣어도 똑같이 실행 => 권장되는 방식은 아니라고함
// 자바스크립트의 eval 함수와 유사
const timeoutId2 = setTimeout('console.log("wow")',3000);
// setInterval도 사용법은 같다
타이머 id 반환값은 실행 환경에 따라 다르다. 브라우저는 number, Node.js는 객체이다.
기본적으로 타이머를 사용했다면 clear를 통해서 제거 해주는게 좋다.
자바스크립트에서 타이머를 사용하고 제거하지 않으면 다양한 상황이 발생할 수 있다.
const timeoutId = setTimeout((name)=> {console.log(name)},3000,'JongHun');
// 사용하고 나서 꼭 써주자
clearTimeout(timeoutId);
타이머에 대해서는 좀 더 알아야할 내용들이 많다! 특히, 이벤트 루프를 통해서 어떻게 작동하는지, 테스크 큐에 어떤 순서로 들어가는지, 우선순위는 어떤지 등등 알아야할 내용들이 있다. 이 내용은 이벤트 루프를 알아보면서 자세하게 적어 볼 예정이다.
우선, 타이머에 대해 간략하게 적은 내용이니 사용법과 핵심을 알 수 있다고 생각한다!