자바스크립트에는 sleep이나 delay 함수가 제공되고 있지 않습니다. 만약 필요하다면, 직접 구현해서 사용해야 합니다.

이 글에서는 동기적인, 비동기적인 sleep 함수를 구현하는 방법에 대해서 알아보겠습니다.

1. sleep 함수 구현 (Sync)

while과 Date를 사용하여, 동기적으로 sleep을 구현할 수 있습니다.

Date.now()로 시간 정보를 가져오고, 지연시켜야 하는 시간 동안 while문에서 멈춰있도록 합니다. 일정 시간이 지나면 while을 탈출하여 다음 코드가 실행되도록 합니다.

function sleepSync(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
}

console.log("시작");
sleepSync(2000); // 2초 동안 일시 중단
console.log("2초 후");

Output:

시작
2초 후

2. sleep 함수 구현 (Async)

Promise와 setTimeout을 사용하여 다음과 같이 비동기적으로 sleep을 구현할 수 있습니다.

function sleepAsync(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

console.log("시작");

sleepAsync(2000) // 2초 동안 일시 중단
  .then(() => {
    console.log("2초 후");
  });

console.log("sleep 호출 완료");

Output:

시작
완료
2초 후

또는, 아래와 같이 async 함수에서 await 키워드와 함께 사용할 수 있습니다.

async function main() {
  console.log("시작");
  await sleepAsync(2000); // 2초 동안 일시 중단
  console.log("2초 후");
}