자바스크립트 javascript sleep

자바스크립트에서 sleep을 사용할 수 있을까? sleep은 다른 언어에서는 일정한 시간 동안 특정 스레드의 작동을 멈추는 것으로 사용된다. 시간 제한이나 타이머 같은것들을 만들다 보면 유용하게 사용된다.

자바스크립트의 sleep 따라하기

반면, 자바스크립트의 경우에는 setTimeout같은 것들이 있다. 이런 함수의 작동방법이 어떤가? 함수를 등록시켜 뒀다가 몇 초 뒤에 실행시키는 방식 아닌가? 이런 면에서는 거의 '무조건' 비동기식으로 하게 된다는 걸 알 수 있다. 즉 sleep을 구현한다 하더라도 진정한 sleep이라고는 말하기 어렵다는 것이다. 비슷한 방식도 아닌데다가, callback형식이니까 말이다.

ECMAScript에서는 가능하다고?

하지만, 우리에겐 ES2017이라는 구세주가 있다. 완벽한 sleep 함수라고는 말할 수 없으나, 최소한 머리아픈 setTimeout의 콜백 문법에 비해서는 쉽고 간편하다.

function sleep(t){
   return new Promise(resolve=>setTimeout(resolve,t));
}

우리는 간단하게 이렇게 return값을 만드는 함수를 정의하기만 하면 된다. ES2017 자바스크립트에서 새롭게 추가된 Promise를 이용한 것이다. (Promise와 관련된 것들을 자세히 알고 싶다면 여기를 참고하길 바란다.)

그럼, 이걸 간단히 활용한 예제를 보도록 하자.

자바스크립트 sleep 함수 예제

function sleep(t){
   return new Promise(resolve=>setTimeout(resolve,t));
}
 
 
 
(async function(){
  //메인 코드
  console.log("시작!");
  await sleep(1000);
  console.log("1초 뒤에 찍힘");
})();

sleep 함수에서 만든 Promise를 이용하기 위해서는 await (기다리기)라는 키워드가 필요하다. 그래서 사용법은 "await sleep(밀리세컨드)"가 된다. 그리고 여기서 하나 더 주의할 점이 있다. 메인 코드를 반드시 async로 감싸야만 await를 사용할 수 있다는 것이다. 그냥 function 아니다. 앞에 async가 들어간 특수 함수이다.

사진이라서 1초라는 시간이 간 것은 알 수 없지만, 직접 실행시켜보면 "시작!" 을 출력한 뒤로 1초가 지난 후 "1초 뒤에 찍힘"이 출력되는 것을 볼 수 있다.

sleep 함수가 그렇게 많이 쓰일지는 의문이지만, Promise 같은 것들을 직접 하나하나 쓰기가 귀찮다면 등록해두고 사용하는걸 추천한다.

그럼, 이만 끝내겠다.