[JS] 코드 실행 지연 시키기 (delay)

흔히 알려진 시간을 지연시키는 방법으로는 setTimeout() 함수가 있습니다. 

 

문제점

function delayTest() {
  console.log("__코드 시작__");

  setTimeout(() => {
    // 5초 후 실행
    console.log("실행! 1");

    setTimeout(() => {
      // 3+5초 후 실행
      console.log("실행! 2");
    }, 5000);
  }, 3000);
}

가장 쉽게 시간을 지연시킬 수 있지만, 다음과 같은 상황에서는 사용하기에 어려움이 존재합니다.

 

• 중첩해서 5초 후에 코드 실행과 3초 후에 코드 실행이 되어야 하는 상황입니다.
• 위 코드와 같이 setTimeout callback 안에 setTimeout을 넣어줘야 하는 문제점이 발생합니다.
• 계속 함수가 늘어나게 되면, 가독성에 문제가 생깁니다.

 

코드

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

async function delayTest() {
  console.log("__코드 시작__");

  // 3초 지연
  await delay(3000);

  // 3초 후 실행
  console.log("실행! 1");

  // 5초 지연
  await delay(5000);

  // 3+5초 후 실행
  console.log("실행! 2");
}

javascript에 존재하는 Promise 개념과 async/await 문법을 이용해서 지연을 시킬 수 있습니다. 

 

• await 키워드를 사용할 함수 앞에 async 키워드를 작성해 줍니다.
• delay 함수 앞에 await 키워드를 붙여주는 것이 끝입니다.
• await 키워드가 붙은 함수(delay)가 반환될 때까지 해당 지점에서 멈추게 될 것입니다.