setTimeout()으로 JavaScript 함수 호출 지연하기
JavaScript에서 특정 함수의 실행을 일정 시간만큼 늦추고 싶다면 setTimeout() 함수를 사용하면 됩니다. 이 함수는 지정한 시간이 지난 후에 콜백 함수를 한 번 실행해 주는 내장 타이머 메서드입니다.
기본 문법
setTimeout(functionname, milliseconds, arg1, arg2, arg3...)
각 매개변수의 의미는 다음과 같습니다.
- functionname − 지정된 시간이 지난 후 실행할 함수의 이름 또는 함수 참조입니다.
- milliseconds − 함수 실행까지 대기할 시간을 밀리초(1/1000초) 단위로 지정합니다. 예를 들어 5000은 5초를 의미합니다.
- arg1, arg2, arg3... − 실행될 함수에 전달할 인자들입니다. 필요하지 않다면 생략할 수 있습니다.
예제 코드
아래 코드는 버튼을 클릭하면 setTimeout() 콜백이 동작하여 정확히 5초 후에 알림 창이 표시되는 예시입니다.
<!DOCTYPE html>
<html>
<body>
<button onclick="timeFunction()">Submit</button>
<script>
function timeFunction() {
setTimeout(function(){ alert("5초가 지났습니다!"); }, 5000);
}
</script>
<p>위 버튼을 클릭한 후 5초간 기다려 보세요.</p>
</body>
</html>추가로 알아두면 좋은 점
setTimeout()은 호출 시 고유한 타이머 ID를 반환합니다. 이 값을 clearTimeout() 함수에 전달하면 예약된 실행을 취소할 수 있어, 사용자 입력에 따라 타이머를 중단해야 하는 상황에서 유용하게 활용됩니다.
const timerId = setTimeout(myFunction, 3000); // 필요할 때 타이머 취소 clearTimeout(timerId);
또한 setTimeout()은 비동기 방식으로 동작하기 때문에, 타이머가 진행되는 동안에도 나머지 코드는 즉시 실행된다는 점을 기억하세요. 지정한 밀리초는 '최소 대기 시간'일 뿐, 브라우저의 이벤트 루프 상태에 따라 실제 실행은 그보다 약간 늦어질 수 있습니다.