자바스크립트 sleep 함수

다른 언어들에는 sleep함수가 있는데 어째서인지 자바스크립트엔 없습니다. 그 이유는, 자바스크립트가 단일 스레드(한번에 한 작업만 처리)언어이기 때문입니다. 진짜로 자바스크립트에 다른 언어같은 sleep 함수가 생긴다면, sleep하는 시간동안 다른 작업을 전혀 처리하지 못하겠죠. 페이지도 멈추고 때때로는 브라우저가 응답없음이 되기도 합니다.

그렇기에 우리는 우리가 원하는대로 작동할 수 있는 sleep 함수를 만들어줄 필요가 있습니다.

* 이 글을 읽을때 async function에 대해 알면 더 편합니다.

자바스크립트의 sleep 함수 만들기

먼저, 자바스크립트의 비동기 함수(async function)의 await 라는 키워드에서 이용하는 Promise 객체를 만들어주는 함수여야 합니다. 그 Promise에서는 일정 시간이 지난 뒤에 다시 코드가 계속 실행될수 있도록 해주면 됩니다.

function sleep(ms) {
  return new Promise(resolve=>setTimeout(resolve, ms));
}
 
(async function() {
  console.log("시작");
  await sleep(2000);
  console.log("2초지남");
})();
 
 

위와 같습니다. sleep 함수 구현은 아주 간단하죠? setInterval과 Promise만 사용하면 된답니다.

사진으로는 알수 없지만, 위와 같이 async function 안에서 await를 이용해 기다리기를 구현할수 있습니다. 그지같은 콜백에서 자유로워진 겁니다. 코드도 깔끔하고 보기 좋은것같죠?

한계

하지만 여기서 딱 한가지 함정이 있는데 알아야 하는데요. async function을 사용한 시점부터 다른 코드들이 저 함수를 계속 기다려주지는 않는다는겁니다. 자바스크립트는 결국 싱글스레드이기에 원리는 콜백과 같은거죠. 그렇기에 이런 문법은 적절히 섞어가면서 쓸 수 있을 뿐입니다. 코드 전체를 이렇게 만들생각은 정말로 안하는게 좋아요. 모든곳을 async function으로 도배하고 싶지 않다면 말입니다.

지금까지 자바스크립트에서의 sleep 함수를 간단하게 만드는 방법이었습니다. 간단한 테스트 또는 프로그램의 조각 정도에서는 잘 쓰일 수 있으니 알아두면 편합니다. 그럼 다음에 다시 올게용.

- JJJAM