[Javascript] delay 함수 구현하기

Javascript로 일정 시간을 대기하거나, 지연시키려면 어떻게 해야 할까요?

 

Javascript는 기본적으로 sleep 함수를 지원하지 않기 때문에 직접 구현해야 합니다. 동기적인, 비동기적인 방법으로 delay(sleep) 함수를 구현하는 방법에 대해서 알아보겠습니다.

 

while로 sleep 구현

Date.now()는 현재 시간을 리턴하며, while로 다른 코드가 수행되지 않도록 하고 2초가 지났을 때 탈출하여 다음 코드가 실행되도록 만들 수 있습니다. whlie에서 명시적으로 시간을 체크하여 delay를 만드는 것이지만, 코드는 직관적입니다.

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

console.log("Start");
sleep(2000);
console.log("Slept for 2 sec");

Output:

Start
Slept for 2 sec

Async 함수에서 sleep 구현

aync function에서 사용할 수 있는 sleep 함수는 아래와 같이 Promise와 setTimeout()을 사용하여 구현할 수 있습니다. await sleep(2000) 처럼 호출을 하면, 2000ms 동안 코드 실행이 지연됩니다.

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

async function main() {
  console.log("Start");
  await sleep(2000);
  console.log("Slept for 2 sec");
}

main();

Output:

Start
Slept for 2 sec