[JS] setTimeout 사용법과 await / sleep 만들기

 

JavaScript에서 setTimeout은 비동기(async)로 특정 시간 후의 로직을 수행시킬 수 있다.

 

setTimeout 수행 예제

console.log('start');

// async로 3초(3,000ms)뒤에 {}안의 로직 수행
setTimeout(() => {
	console.log('call it after 3s');
}, 3000);

console.log('end')

 

setTimeout 수행 결과

>>> start
>>> end
// ...약 3초 뒤...
>>> call it after 3s

 

 

setTimeout에 await를 사용하기

 

setTimeout await 사용

console.log('start');

// async로 3초(3,000ms)뒤에 {}안의 로직 수행
await setTimeout(() => {
	console.log('call it after 3s');
}, 3000);

console.log('end')

setTimeout await 사용 결과

>>> start
>>> end
// ...약 3초 뒤...
>>> call it after 3s

await를 사용하지 않은 결과와 동일하다.

 

그 이유는 setTimeout은 Promise를 return하지 않기 때문

 

await는 Promise해결될 때까지 기다리는 행위이다.

하지만, setTimeout은 지정된 시간이 지난 후 콜백함 수를 수행하는 비동기 함수 일뿐, Promise를 반환하지 않는다.

>>> start
// ...약 3초 뒤...
>>> call it after 3s
>>> end

 

위와 같은 결과를 위해서 await를 사용하려고 했다면, 아래와 같이 해결할 수 있다.

 

setTimeout을 활용한 sleep 예제

// ms 밀리세컨즈 이후 Promise를 반환
const sleep = ms => {
	return new Promise(resolve => {
    	setTimeout(resolve, ms)
        })
}

// sleep을 활용
const delay = async () =>{
    console.log('start');
    await sleep(3000);
    console.log('end');
}

// delay 호출
delay()

 

setTimeout을 활용한 sleep 예제 결과

 

>>> start
// ...약 3초 뒤...
>>> call it after 3s
>>> end