[JS] 코드 실행 특정 시간 대기/지연 방법 (코드 1줄)

# Javascript - 코드 실행 대기/지연(Wait/Delay) 방법

Promise 를 이용하면 코드의 실행을 특정 시간 대기 시킬 수 있다.

아래의 코드 1줄짜리 함수를 정의해두고 호출하면 된다.

 

const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec));

 

구체적인 사용 방법은,

delayTime() 함수를 호출하면 Promise를 반환하므로 

then(콜백함수) 방식이나, async/await 방식을 사용하면 된다.

 

const delayTime = async (millisec) => new Promise((resolve) => setTimeout(resolve, millisec));

// then(콜백함수) 방식
delayTime(1000).then(() => {
  console.log("1초후에 실행");
});

// async/await 방식
(async () => {
  await delayTime(1000);
  console.log("1초후에 실행");
})();

 

세부적인 작동원리는

Promise의 작동방식을 안다면 쉽게 이해할 수 있다.

 

1. Promise 생성자는 인자로 콜백함수 (resolve, reject)=>{ ... } 를 입력 받는다.
2. 이 콜백함수 내부에 setTimeout(resolve, 시간)을 정의해둔다.
3. delayTime() 함수를 호출하면 Promise 객체가 생성되어 반환되고,
   1. 그 즉시 (resolve, reject)=>{ setTimeout(resolve, 시간) } 콜백함수가 실행된다.
   2. 이후 setTimeout에 설정한 시간이 지나면 resolve()가 호출 된다.
4. resolve()가 호출되면, 그제서야
   1. delayTime(시간).then(콜백함수)의 콜백함수가 실행된다.
   2. async 함수 내부라면, await dealyTime(시간); 이후의 코드가 실행된다.

---

특히 로딩 화면이나 애니메이션 구현 등을 위해 코드 실행을 지연시킬 때 유용하다.

개인적으로 아주 즐겨쓰는 방식이다.