자바스크립트 - 시간 지연 함수 setTimeout, sleep

자바스크립트 전체 링크

 

setTimeout을 이용하면 함수를 X ms초 뒤에 실행할 수 있다.

function show(str) {
    console.log(str);
}

setTimeout(show("test 1"), 3000); // 잘못된 사용

setTimeout(function() {
    show("test 2");
}, 3000);

setTimeout(() => show("test 3"), 3000);

 

첫 번째 setTimeout은 잘못 사용한 경우다. setTimeout은 callback 함수를 받기를 원하지만,

show("test 1")을 실행하여서 시작하자마자 test 1이 출력되었다.

setTimeout(show("test 1"), 3000); // 잘못된 사용

 

따라서 아래와 같이 함수를 넘겨야 한다. 그러면 3초 뒤에 show 함수가 호출된다.

setTimeout(show, 3000);

 

함수에 parameter가 없기 때문에 undefined가 호출되었다.

추가로 parameter를 넘겨주기 위해서는 delay time 뒤에 parameter를 추가한다.

setTimeout(show, 3000, "test 1");

 

또는 test 2나 3 방식으로 setTimeout을 호출하면 된다.

test 2는 함수를 정의하여 show에 "test 2"를 넘겨주었고, test 3은 arrow function을 이용하였다.

setTimeout(function() {
    show("test 2");
}, 3000);

setTimeout(() => show("test 3"), 3000);

 

하지만 위 코드는 3초가 지나면 test 1, 2, 3이 동시에 호출된다.

setTimeout에서 show를 3초뒤에 호출하기는 하지만, setTimeout은 여전히 연속으로 호출하였기 때문이다.

만약에 3초마다 test 1, 2, 3이 반복되게 하고 싶다면 사이에 loop 지연 함수를 만들면 된다.

function sleep(ms) {
  const loopTime = Date.now() + ms;
  while (Date.now() < loopTime) {}
}

 

즉, 아래와 같이 동기 방식으로 지연이 일어나 test 1이 출력된 후 3초 뒤에 test 2가 출력된다.

function sleep(ms) {
  const loopTime = Date.now() + ms;
  while (Date.now() < loopTime) {}
}

function show(str) {
  console.log(str);
}

show("test 1");
sleep(3000); 
show("test 2");
sleep(3000);
show("test 3");

---

setTimeout은 return값이 존재하는데, 이 return값을 clearTimeout에 넘겨주면, setTimeout을 삭제할 수 있다.

아래의 코드에 의해 test 2가 출력되지 않는다.

function show(str) {
    console.log(str);
}

let time1 = setTimeout(show, 3000, "test 1");

let time2 = setTimeout(function() {
    show("test 2");
}, 3000);

let time3 = setTimeout(() => show("test 3"), 3000);

console.log(time1, time2, time3);

clearTimeout(time2);

 

setTimeout 이벤트가 불필요하게 메모리에 계속 남아 있으면 성능 저하가 일어나기 때문에,

사용을 완료하였다면 clearTimeout으로 제거하는 것이 좋다.