코드 실행 특정 시간 대기/지연 방법

JavaScript에서 코드의 실행을 특정 시간 동안 지연시키고 싶을 때가 종종 있습니다.

이럴 때 유용하게 사용할 수 있는 것이 바로 Promise와 setTimeout을 조합한 방법입니다.

간단하게 한 줄짜리 함수로 정의해두고 호출하는 방식으로 손쉽게 구현할 수 있습니다.

다음은 실행 지연을 위한 간단한 함수입니다.

 

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

 

이 함수를 사용하면 코드의 실행을 원하는 시간만큼 지연시킬 수 있습니다. 예를 들어 delayTime() 함수를 호출하면 Promise 객체가 반환되므로, then()을 이용한 콜백 함수 방식이나 async/await 방식으로 활용할 수 있습니다.

사용 예시

then(콜백 함수) 방식

delayTime(1000).then(() => {
  console.log("1초 후에 실행");
});

 

위의 예시는 delayTime(1000)을 호출하여 1초 후에 then() 안의 콜백 함수가 실행되도록 합니다. 즉, 1초 후에 "1초 후에 실행"이라는 로그가 출력됩니다.

async/await 방식

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

 

이 방식은 async 함수 내부에서 await를 사용하여 코드 실행을 지연시킵니다.

delayTime(1000)이 1초 후에 완료된 뒤에 다음 코드가 실행되므로, 마찬가지로 "1초 후에 실행"이라는 로그가 출력됩니다.

작동 원리

위의 함수가 작동하는 원리를 이해하기 위해서는 Promise의 기본적인 작동 방식에 대해 알아야 합니다.

Promise 생성자는 인자로 콜백 함수 (resolve, reject) => { ... }를 받습니다.

이 콜백 함수 내부에 setTimeout(resolve, 시간)을 정의해두면, 해당 시간이 지난 후에 resolve()가 호출됩니다.

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

 

delayTime() 함수를 호출하면 Promise 객체가 생성되어 반환됩니다.

이때, (resolve, reject) => { setTimeout(resolve, 시간) } 콜백 함수가 즉시 실행되고, 지정한

시간이 지나면 resolve()가 호출됩니다.

이렇게 resolve()가 호출되면, delayTime(시간).then(콜백 함수)에서 then() 안에 정의된 콜백 함수가 실행됩니다.

또는 async 함수 내부에서 await delayTime(시간); 이후의 코드가 실행됩니다.

정리

Promise와 setTimeout을 조합한 이 방법은 코드 실행을 지연시키고자 할 때 매우 유용하게 사용할 수 있습니다.

특히, 비동기 로직에서 일정 시간 후에 특정 작업을 수행해야 할 때 간결하고 직관적인 방식으로 사용할 수 있습니다.