[javascript] 특정 시간만큼 대기시키는 함수 만들기(setTimeout(), Promise, async await)

함수 실행 중에 특정 시간만큼 대기시키고 싶을 때 사용하는 함수 만들기

안녕하세요~ 보통 자바스크립트에서 시간을 지연시키기 위해서 setTimeout()을 많이 활용하는데요

setTimeout의 파라미터를 살펴보면 첫 번째로 code 부분이 들어가고 두 번째로 delay가 들어갑니다.

이중 code는 시간이 지연된 후에 실행될 코드를 말하고 delay는 얼마큼 시간을 지연시킬지를 정하는 값입니다.

그렇다면 특정 시간만큼 대기후에 다음 코드를 실행시키기 위해서는 setTimeout()의 code 파라미터에 코드를 넣어주면 해결되겠죠.

그렇지만 특정 이유로 자주 지연시켜야할 수도 있고 가독성도 떨어지기 때문에 setTimeout()을 응용해서 useSleep()라는 함수를 만들어보겠습니다.

const testFunction = async () => {
    console.log("3초 대기");
    await useSleep(3000);
    console.log("3초 끝");
}

위와 같이 ms를 파라미터로 넣어주면 그 시간만큼 대기시키는 함수를 만드는 것이 목표입니다.

그럼 단순히 setTimeout()을 중간에 넣어주면 어떨까요?

MDN 문서를 살펴보면 아래와 같은 내용이 있습니다.

Working with asynchronous functions

setTimeout() is an asynchronous function, meaning that the timer function will not pause execution of other functions in the functions stack. In other words, you cannot use setTimeout() to create a "pause" before the next function in the function stack fires.

setTimeout()은 비동기 함수이므로 중간에 넣어준다고 해서 함수 중간에 "정지"되는 것은 아니라는 것이죠.

그렇다면 단순히 setTimeout()를 함수 중간에 넣어주는 것으로는 만들 수 없겠네요!

그럼 어떻게 하면 좋을까요??

바로 Promise를 이용하면 동기식으로 바꾸어 "정지"시킬 수 있습니다.

export const useSleep = delay => new Promise(resolve => setTimeout(resolve, delay));

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다.

다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환하는 것입니다.

프로미스는 대기(pending), 이행(fulfilled), 거부(rejected) 상태중 하나를 가집니다.

대기 상태에서 벗어나면(이행되거나 거부되면) 처리됐다고 표현합니다.

resolve는 그 약속을 이행하는 Promise 객체를 반환합니다.

위 코드를 보면 delay만큼 대기했다가 resolve가 실행되어 Promise가 대기 상태에서 벗어나 이행되므로, Promise가 반환될 때까지는 delay만큼 시간이 소요됩니다.

그리고 자바스크립트는 await 키워드를 만나면 프라미스가 처리될 때까지 기다립니다.

따라서 useSleep앞에 await 키워드를 적어주면 파라미터에 넣은 ms의 시간만큼 대기하고 다음 코드가 실행되게 됩니다!!

참고로 await를 사용하기 위해서는 반드시 함수가 async 함수여야 합니다.

이렇게 함수를 만들어두고 사용하면 가독성도 높아지고 편리합니다.

저는 useSleep이라고 이름을 지었지만 함수 이름은 편한 대로 지으시면 되겠습니다.

다음번에도 유용한 javascript 포스팅으로 돌아올게요~ 감사합니다