`setTimeout`을 약속하여 코드 단순화

Originally Published @ puruvj.dev

최근에 실습 프로젝트 Microsoft Todo Clone 에서 작업할 때 다음과 같은 코드를 구현해야 했습니다.

#1 Do Task 1
#2 Wait for 200ms
#3 Do task 2
#4 Wait for 200ms
#5 Do Task 3

공지 #2 및 #4 . setTimeout😖의 냄새가 납니다. setTimeout은 들여쓰기가 있음을 의미하는 콜백을 받습니다. 그것들이 나타날 때마다 코드가 추악해질 것임을 의미합니다.

그래서 JS로 이 코드를 작성했습니다.

doTask1();

setTimeout(() => {
  doTask2();

  setTimeout(() => {
    doTask3();
  }, 200);
}, 200);

이제 이 코드가 SMELLS임을 직접 확인할 수 있습니다. 나쁜.

그것을 쓰는 순간 나는 그것이 장기적으로 작동하지 않을 것이라는 것을 알았다. 작업 #4를 기다리고 수행하는 추가 단계가 필요한 경우 어떻게 합니까? 또는 순서를 재정렬합니다.

그래서 유틸리티 함수를 선언하고 문제를 완전히 해결했습니다.

/**
 * @param {number} time Time to wait for in milliseconds
 */
function waitFor(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

여기에서 Promise 을 반환합니다. 이는 내부의 setTimeout 함수가 실행될 때 해결됩니다.

사용법은 다음과 같이 간단합니다.

await waitFor(200);

따라서 위의 스파게티 코드는 다음과 같이 재배열될 수 있습니다.

doTask1();

await waitFor(200);

doTask2();

await waitFor(200);

doTask3();

얼마나 간단해졌는지 보이시나요? 내가 맨 위에 쓴 텍스트 버전과 정확히 같습니다. 매우 관용적입니다 😎.

더 짧은 코드

해당 코드 스니펫은 더 단순화될 수 있습니다.

const waitFor = (time) => new Promise((resolve) => setTimeout(resolve, time));