setTimeout()이란?
setTimeout()은 자바스크립트 타이밍 이벤트 중 하나로, window 객체가 제공하는 대표적인 메서드입니다. window 객체는 지정한 시간 간격으로 코드를 실행할 수 있도록 해주는데, 그중 setTimeout()은 일정 시간이 지난 후 특정 함수를 딱 한 번 실행하는 데 사용됩니다.
setTimeout()은 두 개의 매개변수를 인자로 받습니다. 첫 번째는 실행하고자 하는 함수이고, 두 번째는 함수가 실행되기까지 기다릴 시간을 나타내는 시간(밀리초)입니다. 예를 들어 2000을 전달하면 함수가 2초 후에 실행됩니다.
기본 문법
window.setTimeout(function, milliseconds);
예제 1: 2초 후 텍스트 출력하기
다음 예제에서는 setTimeout() 함수에 2000밀리초(2초)를 전달합니다. 따라서 함수는 2초 후에 실행되어 아래와 같은 결과를 화면에 표시합니다.
<html>
<body>
<p>wait 2 seconds.</p>
<script>
setTimeout(function(){
document.write("Tutorix is the best e-learning platform");
}, 2000);
</script>
</body>
</html>실행 결과
wait 2 seconds Tutorix is the best e-learning platform
예제 2: 특정 요소에 내용 삽입하기
다음 예제에서는 setTimeout() 함수에 3000밀리초(3초)를 전달하여 함수가 3초 후에 실행되도록 했습니다. 이 예제는 document.getElementById()를 활용해 id가 "time"인 요소의 innerHTML을 변경하는 방식으로 동작합니다.
<html>
<body>
<p id = "time"></p>
<script>
setTimeout(function(){
document.getElementById("time").innerHTML = "Tutorix is the product of Tutorialspoint";
}, 3000);
</script>
</body>
</html>실행 결과
Tutorix is the product of Tutorialspoint.
알아두면 좋은 추가 정보
- 시간 단위 변환: 두 번째 인자의 단위는 밀리초(ms)이므로, 1초 = 1000밀리초입니다. 즉, 5초 후 실행하려면 5000을 전달하면 됩니다.
- 화살표 함수 활용: 최신 자바스크립트에서는 익명 함수 대신 화살표 함수를 사용해 더 간결하게 작성할 수 있습니다. 예:
setTimeout(() => { ... }, 2000); - 타이머 취소: setTimeout()은 고유한 타이머 ID를 반환하며, 이 값을 clearTimeout()에 전달하면 예약된 실행을 취소할 수 있습니다.