JavaScript sleep 함수

JavaScript 코드를 작성하다 보면 잠깐 동안 아무 것도 하지 않고 기다리는 sleep 함수가 필요한 경우가 있습니다. JavaScript에는 sleep 함수가 없죠. 그래서 아무것도 몰랐던 저는 sleep과 비슷한 setTimeout 함수를 사용해 테스트 해봤습니다.

setTimeout 사용 (실패)

const sleepTest = () => {
  console.log("sleep() start");
  setTimeout(() => {
    console.log("after 3sec");
  }, 3000);
  console.log("sleep() end");
};
 
sleepTest();

테스트 결과가 예상대로 나오지 않았습니다. 🤔

왜 안되는지 여기 저기 검색하다 보니. 저는 동기/비동기 개념에 대해 무지한 것이 틀림 없었습니다.. 🤦‍♂️ 나름대로 공부하여 자바스크립트에 대한 이해도를 높여 작성한 코드는 아래와 같습니다.

Promise와 Async/Await 사용 (성공)

const sleep = async (ms) => {
  return new Promise(
    (resolve, reject) =>
      setTimeout(
        () => resolve(),
        ms * 1000
      )
  );
};
 
const sleepTest = async () => {
  console.log("sleep() before");
  await sleep(3);
  console.log("sleep() after");
};
 
sleepTest();

급하신 분들은 위 코드를 복사해서 사용하시면 됩니다.

하지만, 짧으면서도 많은 것을 내포하고 있는 코드이니 한 번 살펴볼 필요가 있습니다. 🔍

JavaScript sleep 함수 설명

간단하게 설명하면 sleepTest 함수와 sleep 함수는 선언 앞에 async를 붙여줌으로써 비동기 함수가 됩니다.
sleep 함수는 비동기 작업의 완료 또는 실패를 나타내는 Promise 객체를 반환합니다. (Promise 객체는 resolve, reject 두 개의 콜백 함수를 가집니다. 비동기 작업이 완료되면 resolve를 호출하고, 비동기 작업이 실패하면 reject를 호출하도록 구현합니다.)
sleep 함수는 비동기 작업이 성공적으로 완료되면(ms*1000 ms초가 지나고 나면) resolve 함수를 호출하도록 구현됐습니다.
함수 선언에 async가 붙어 비동기 함수가 되면, 함수 내에서 await 명령어를 사용하거나 Promise chain을 만들어 비동기 작업이 종료된 후 수행할 작업을 지정할 수 있습니다. sleepTest 내부에서 호출된 sleep 함수는 비동기 함수이므로 await 연산자를 붙여서 호출하여 비동기 작업이 완료된 후 console.log(“sleep() after”)가 호출되도록 했습니다.

더 자세히 알고 싶다면 비동기/동기에 대한 이해(👈click!!) , WEB API에 속한 setTimeout 함수, Promise 객체, 콜백 함수, async/await… 등에 대해 공부해보세요. 😊