C나 Python 같은 언어에는 스레드를 일시 정지시키는 sleep() 함수가 있지만, JavaScript에는 이러한 전통적인 sleep 함수가 존재하지 않습니다. 대신 await 키워드를 사용하면 동일한 효과를 얻을 수 있습니다.
await는 현재 실행 중인 비동기(async) 함수의 흐름을 일시적으로 중단시키는 역할을 합니다. 지정된 시간이 경과할 때까지 다음 코드의 실행을 지연시키고 싶을 때 매우 유용합니다.
동작 원리
await는 반드시 Promise 객체와 함께 사용됩니다. setTimeout()을 활용해 지정된 밀리초(ms) 후에 resolve되는 Promise를 반환하는 헬퍼 함수를 만들고, 이를 async 함수 내부에서 await로 호출하면 원하는 시간만큼 실행을 지연시킬 수 있습니다.
예제
다음 코드를 직접 실행하여 JavaScript에서 sleep 기능이 어떻게 구현되는지 확인해 보세요.
실시간 데모
<!DOCTYPE html>
<html>
<body>
<script>
function setSleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function Display() {
document.write('Wait for 5 seconds!');
await setSleep(5000);
document.write('After 5 seconds!');
}
Display();
</script>
</body>
</html>코드 설명
setSleep(ms) 함수는 주어진 시간 후에 resolve되는 Promise를 반환합니다. async 함수인 Display() 내부에서 await setSleep(5000)을 호출하면 5초 동안 실행이 멈춘 뒤, 그다음 문장이 출력됩니다. 결과적으로 화면에는 먼저 "Wait for 5 seconds!"가 표시되고, 5초 후에 "After 5 seconds!"가 이어서 나타납니다.