자바스크립트 sleep() 함수 구현 방법 – setTimeout과 async/await 활용하기

자바스크립트에는 다른 프로그래밍 언어처럼 코드 실행을 일시 정지하는 sleep() 함수가 기본적으로 제공되지 않습니다. 이는 자바스크립트가 단일 스레드 기반의 이벤트 루프로 동작하기 때문인데, 실행이 멈추면 전체 페이지가 응답하지 않게 될 수 있기 때문입니다.

다행히도 setTimeout과 async/await를 조합하면 sleep과 동일한 효과를 손쉽게 구현할 수 있습니다. 가장 간단한 방법은 Promise를 반환하는 커스텀 sleep 함수를 직접 만드는 것입니다.

구현 예제

const sleep = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds))

// 콜백(Promise then) 방식으로 사용
sleep(1000).then(() => console.log("1초 대기했습니다!"))

// async/await 방식으로 사용
const waitASec = async () => {
    await sleep(1000)
    console.log("1초 대기했습니다!")
}
waitASec()

실행 결과

1초 대기했습니다!
1초 대기했습니다!

동작 원리

위 예제에서 sleep 함수는 지정된 밀리초 후에 resolve되는 Promise를 생성합니다. await 키워드와 함께 사용하면 해당 시간만큼 비동기적으로 대기한 뒤 다음 코드가 실행됩니다. 중요한 점은 실제로 스레드가 멈추는 것이 아니라 이벤트 루프가 다른 작업을 계속 처리하면서 대기한다는 것입니다.

사용 시 주의 사항

await는 반드시 async 함수 내부에서만 사용할 수 있으며, 최상위 레벨에서는 ES 모듈 환경에서만 지원됩니다. 또한 무분별한 sleep 사용은 성능 저하나 UX 문제를 일으킬 수 있으므로, 애니메이션 딜레이, API 요청 재시도 간격 조절 등 필요한 경우에만 적절히 활용하는 것이 좋습니다.