[JavaScript] ⛔ sleep, wait 함수를 이용하여 프로그램의 실행을 지연시키기

목차

Sleep, Wait 함수 만들기

코딩을 하다 보면 여러 가지 이유로 프로그램의 실행을 잠시 멈추거나 일정 시간동안 실행을 지연시키고 싶을 때가 있다. 예를 들어, 자바에서는 Thread.sleep() 함수를 사용하고 파이썬에서는 time.sleep() 함수를 사용하여 의도된 지연 효과를 줄 수가 있다.

 

다른 프로그래밍 언어들에서는 이러한 API를 쉽게 찾아볼 수 있지만 자바스크립트에선 따로 sleep()함수가 존재하지 않기 때문에, 직접 개발자가 구현해주어야 한다. 이를 구현하기 위해서는 while 문과 Promise 를 사용해야 하는데, 프로그램의 실행을 일정 시간동안 지연시키는 코드는 다음과 같다.

---

while문 활용

시간날짜를 얻는 함수 Date() 와 while문 조건으로 3초 지난걸 확인하는 방법으로 sleep문을 구현.

JavaScript

function sleep(sec) {
    let start = Date.now(), now = start;
    while (now - start < sec * 1000) {
        now = Date.now();
    }
}

console.log(11)
sleep(3);
console.log(22)

---

waait

웹 개발을 하던 중 일정 시간을 기다렸다가 다시 실행해야하는 프로그램이 많이 사용해야 할 경우, 라이브러리를 사용하는 방법도 있다.

 

이를 구현해주는 대표적인 라이브러리가 waait로 위에서 작성한 코드와 크게 다르지 않다. 아래 코드와 같이 waait 패키지에서 wait 함수를 가져와 동일한 방법으로 사용하면 된다.

JavaScript

import wait from "waait";

async function test() {
  console.log("before");
  await wait(3000);
  console.log("after");
  console.log("done!");
}

---

Promise 객체 활용​

우선 Promise 객체를 만들고 setTimeout으로 시간 ms 후에 resolve하게 한다. 이 비동기 Promise 함수를 await으로 동기처리를 해주면 sleep과 같은 기능을 하게 된다.

JavaScript

function sleep(sec) {
  return new Promise(resolve => setTimeout(resolve, sec * 1000));
} // 함수정의


(async () => {
  ... 코드1
  await sleep(2); // 2초대기
  ... 코드2
})();

JavaScript

// 최근 추가된 Top-Level Await 문법으로 인해 바로 await를 사용할수도 있다.
... 코드1
await sleep(2); // 2초대기
... 코드2

---

참고 문헌

• 1자바스크립트에서 프로그램의 실행을 지연시키기 (sleep)
• 2🚀 자바스크립트에 sleep() & wait() 대기 함수 쓰기
• 3JavaScript로 sleep함수 구현