[javascript] setTimeout / setInterval

setTimeout과 setInterval을 이용한 호출 스케줄링

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을
'호출 스케줄링(scheduling a call)'이라고 합니다.

호출 스케줄링을 하는 두 가지 방법

• setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
• setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법

setTimeout

<scirpt>
	let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
</script>

func|code

실행하고자 하는 코드로, 함수 또는 문자열 형태입니다. 대개는 이 자리에 함수가 들어갑니다. 하위 호환성을 위해 문자열도 받을 수 있게 해놓았지만 추천하진 않습니다.

delay

실행 전 대기 시간으로, 단위는 밀리초(millisecond, 1000밀리초 = 1초)이며 기본값은 0입니다.

arg1, arg2…

함수에 전달할 인수들로, IE9 이하에선 지원하지 않습니다.

함수는 실행하지 말고 넘기기

setTimeout에 함수를 넘길 때, 함수 뒤에 () 을 붙이는 실수를 하곤 합니다.

<script>
// 잘못된 코드
setTimeout(sayHi(), 1000);
</script>

setTimeout은 함수의 참조 값을 받도록 정의되어 있는데 sayHi()를 인수로 전달하면 함수 실행 결과가 전달되어 버립니다. 그런데 sayHi()엔 반환문이 없습니다.

호출 결과는 undefined가 되겠죠. 따라서 setTimeout은 스케줄링할 대상을 찾지 못해, 원하는 대로 코드가 동작하지 않습니다.

clearTimeout으로 스케줄링 취소하기

setTimeout을 호출하면 '타이머 식별자(timer identifier)'가 반환됩니다. 스케줄링을 취소하고 싶을 땐 이 식별자(아래 예시에서 timerId)를 사용하면 됩니다.

스케줄링 취소하기:

<script>
	let timerId = setTimeout(...);
	clearTimeout(timerId);
</script>

setInterval

setInterval 메서드는 setTimeout과 동일한 문법을 사용합니다.

<script>
	let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)
</script>

인수 역시 동일합니다. 다만, setTimeout이 함수를 단 한 번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다.

함수 호출을 중단하려면 clearInterval(timerId)을 사용하면 됩니다.

전역변수를 이용한 setInterval

<script>

timers = undefined;

function startGameTimer() {
  	timers = setInterval(() => {
    count -= 1;
    if (count >= 0) {
      timer.innerHTML = `0 : ${count}`;
    } else {
      clearInterval(timers);
      finishGame();
      return;
    }
  }, 1000);
}


</script>

위 코드처럼 setInterval timers를 멈추려면 함수 내부에서 clearInterval을 사용해야 합니다.

하지만 함수 내부에서 미리 timers (setInterval) 을 정의 해두면 전역변수로써 함수 외부에서도 사용할 수 있습니다.