[JavaScript] 스케줄링 setTimeout 과 setInterval

[JavaScript] setTimeout과 setInterval

출처 :: 스케줄링: setTimeout과 setInterval

 

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 "호출 스케줄링(scheduling a call)"이라 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다.

• setTimeout :: 일정 시간이 지난 후에 함수를 실행하는 방법.

• setInterval :: 일정 시간 간격을 두고 함수를 실행하는 방법.

  자바스크립트 명세서엔 setTimeout과 setInterval가 명시되어 있지 않다. 하지만 시중에 나와있는 모든 브라우저, Node.js를 포함한 자바스크립트 호스트 환경 대부분 이와 유사한 메서드와 내부 스케줄러를 지원한다.

 

setTimeout

문법 ::

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

매개변수 ::

func|code

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

delay

실행 전 대기 시간(지연 간격)으로, 단위는 밀리초(millisecond, 100밀리초 = 1초)이다. 기본값은 0.

arg1, arg2...

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

 

예제 ::

아래 코드를 실행하면 1초 후 sayHi()가 호출된다.

function sayHi() {
  alert('Hello');
}
setTimeout(sayHi, 1000);

아래와 같이 함수에 인수를 넘겨 줄 수 있다.

function sayHi(phrase, who) {
  alert(phrase + ', ' + who);
}
setTimeout(sayHi, 1000, 'Hello', 'John'); // Hello, John

setTimeout의 첫 번째 인수가 문자열이면, 자바스크립트는 이 문자열을 이용해 함수를 만든다.

setTImeout('alert("Hello")', 1000);

하지만 문자열 사용 방법은 추천하지 않는다. 아래와 같이 사용하자.

setTimeout(function() { alert('Hello') }, 1000);
// 또는 화살표함수
setTimeout(() => alert('Hello'), 1000);

 

❗️함수를 실행하지 말고 넘기자.

초보개발자는 setTimeout에 함수를 넘길 때, 함수 뒤에 ()을 붙이는 실수를 한다.

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

setTimeout은 함수의 참조값을 받는다. 그런데 sayHi()를 인수로 전달하면 함수 실행 결과가 전달되어 버린다. sayHi()에는 반환문이 없기 때문에 실행 결과는 undefined으로 나온다. setTimeout은 스케줄링할 대상을 찾지 못해, 원하는 대로 코드가 동작하지 않는다.

 

clearTimeout으로 스케줄링 취소하기

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

let timerId = setTImeout(() => alert('아무런 일도 일어나지 않는다.'), 1000);
alert(timerId); // 타이머 식별자

clearTimeout(timerId);
alert(timerId); // 위 타이머 식별자와 동일함.(취소 후에도 식별자의 값은 null이 되지 않는다.)

예시를 실행하면 alert 창이 2개 뜨는데, 브라우저 환경에선 타이머 식별자가 숫자라는 것을 알 수 있다.

다른 호스트 환경에선 타이머 식별자가 숫자형 이외의 자료형일 수도 있다. Node.js에서는 setTimeout을 실행하면 타이머 객체가 반환된다.

스케줄링에 관한 명세는 따로 존재하지 않는다. 명세가 없기 때문에 호스트 환경마다 약간의 차이가 있을 수 밖에 없다.

참고로 브라우저는 HTML5의 timers section을 준수하고 있다.

 

setInterval

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

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

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

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

 

아래 예제를 실행하면 메세지가 2초 간격으로 보여지다가 5초 이후에는 더 이상 메세지가 보이지 않는다.

// 2초 간격으로 메세지를 보여줌
let timerId = setInterval(() => alert('tick'), 2000);

// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);

 

❗️alert창이 떠 있더라도 타이머는 멈추지 않는다.

크롬과 파이어폭스를 포함한 대부분의 브라우저는 alert / confirm / prompt창이 떠 있는 동안에도 내부 타이머를 멈추지 않는다.

위 예제들을 실행하고 첫 번째 alert창이 떴을 때 몇 초간 기다렸다가 창을 닫으면, 두 번째 alert창이 바로 나타나는 것을 보고 이를 확인 할 수 있다. 명시한 지연 시간 2초보다 alert창 간격이 짧아진다.

 

 

중첩 setTimeout

무언가를 일정 간격을 두고 실행하는 방법은 크게 2가지가 있다.

하나는 setInterval을 이용하는 방법이고, 다른 하나는 아래 예시와 같이 중첩 setTimeout을 이용하는 방법이다.

/* setInterval을 이용하지 않고 아래와 같이 중첩 setTimeout을 사용함 */

// let timerId = setInterval(() => alert('tick'), 2000);

let timerId = setTimeout(function tick() {
  alert('tick');
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);
// 2초마다 발생

setTimeout은 (*)로 표시한 줄의 실행이 종료되면 다음 호출을 스케줄링한다.

중첩 setTimeout을 이용하는 방법은 setInterval을 사용하는 방법보다 유연하다. 호출 결과에 따라 호출을 원하는 방식으로 조정해 스케줄링 할 수 있기 때문이다.

 

5초간격으로 서버에 요청을 보내 데이터를 얻고 있다고 가정해보자. 서버가 과부하상태라면 요청 간격을 10초, 20초, 40초 등으로 증가시켜주는 것이 좋을 것이다. 아래는 이를 구현한 의사 코드이다.

let delay = 5000;

let timerId = setTimeout(function request() {
  // .. 요청 보내기 ..
  if(/* 서버 과부하로 인한 요청 실패 */) {
     // 요청 간격을 늘린다.
     delay *= 2;
     }
  timerId = setTimeout(request, delay);
}, delay);

 

CPU 소모가 많은 작업을 주기적으로 실행하는 경우에도 setTimeout을 재귀 실행하는 방법이 유용하다. 작업에 걸리는 시간에 따라 다음 작업을 유동적으로 계획할 수 있기 때문이다.

중첩 setTimeout을 이용하는 방법은 지연간격을 보장하나, setInterval은 이를 보장하지 않는다.

 

아래 두 예시를 비교해보자. 첫번째는 setInterval을 이용하였다.

let i = 1;
setInterval(function() {
  func(i++);
}, 100);

두 번째 예시에선 중첩setTimeout을 이용했다.

let i = 1;
setTimeout(function run() {
  func(i++);
  setTimeout(run, 100);
}, 100);

setInerval을 이용한 예시에선, 내부 스케줄러가 func(i++)를 100밀리초마다 실행한다.

 

setInterval

setInterval을 사용하면 func 호출 사이의 지연 간격이 실제 명시한 간격(100ms)보다 짧아진다.

func을 실행하는데 "소모되는" 시간이 지연 간격에 포함되기 때문에 이런 일이 발생한다. 지극히 정상적인 동작이라 할 수 있다.

그런데 func을 실행하는데 걸리는 시간이 명시적 지연 간격보다 길면 어떻게 될까?

이런 경우 엔진이 func의 실행이 종료될 때까지 기다려준다. func의 실행이 종료되면 엔진은 스케줄러를 확인하고, 이때 지연 시간이 지났으면 다음 호출을 바로 시작한다.

함수를 호출할 때마다 걸리는 시간이 delay 밀리초보다 길면, 모든 함수가 쉼 없이 계속 연속 호출된다.

 

이에 반해 중첩, setTimeout을 이용하면 아래와 같이 실행흐름이 이어진다.

 

중첩 setTimeout

 

중첩 setTimeout을 사용하면 명시한 지연(여기서는 100ms)이 보장된다.

이렇게 지연 간격이 보장되는 이유는 이전 함수의 실행이 종료된 이후에 다음 함수 호출에 대한 계획이 세워지기 때문이다.

❗️가비지 컬렉션과 setInterval / setTimeout

setInterval이나 setTimeout에 함수를 넘길 때, 함수에 대한 내부 참조가 새롭게 만들어지고 참조 정보가 스케줄러에 저장된다. 따라서 해당 함수를 참조하는 것이 없어도 setInterval / setTimeout에 넘긴 함수는 가비지 컬렉션의 대상이 되지 않는다.

// 스케줄러가 함수를 호출할 때까지 함수는 메모리에 유지된다.
setTimeout(function() {...}, 100);

setInterval에 넘겨주는 함수는 clearInterval이 호출되기 전까지 메모리에 유지된다.

그런데 이런 동작 방식에는 부작용이 하나 있다. 함수가 외부 렉시컬 환경을 참조하고 있으면 해당 함수가 메모리에 남아있는 동안, 외부 변수 역시 메모리에 남아있기 때문이다. 이렇게 되면 실제 함수가 차지했어야 하는 공간보다 더 많은 메모리 공간이 사용된다. 이런 부작용을 방지하려면 스케줄링할 필요가 없어진 함수는 아무리 작더라도 취소해야 한다.

 

추가 내용

자바스크립트 타이밍 이벤트

1. delay에 대하여

언뜻 보기에는 setInterval과 setTimeout함수는 매우 유사한 점이 많다. 다른점이라 하면 반복실행을 하느냐, 한 번 실행하느냐에 정도로 보일 수도 있다 하지만 정말 다른 점은 지연시간(Delay)과 각 함수의 처리 방식이다.

1.1) setInterval

Real delay for setInterval is actually less than given. If the execution is impossible, it is queued. If the browser is busy, and the execution is already queued, setInterval skips it.

[출처] Javascript Tutorial - Understanding timers: setTimeout and setInterval

설명하자면 setInterval함수의 실제 지연시간은 개발자가 준 시간보다 실제적으로 적다는 뜻이다. 또한 실행할 수 없는 상태라면 큐에 저장된다. 또한 만약에 브라우저가 처리할 수 없는 상태(바쁜 상태)이고, 이미 큐에 저장된 것이 있다면 setInterval은 무시한다.

다시 말해서 setInterval은 지정된 시간 간격만큼 무조건 지정된 코드를 호출하고자 한다. 하지만 지정된 시간 간격에 도달했음에도 불구하고 지정된 코드를 실행할 수 없는 상태라면 setInterval은 이벤트를 큐(queue)에 저장한다.

여기서 큐(queue)를 조금 더 자세히 알아보자. setInterval에서 큐의 크기는 1이다. 하나의 실행만을 저장할 수 있다. 그리고 큐에 저장된 것이 있다면 실행해야할 시간 간격과는 관계 없이 실행 가능한 상태일 때, 즉시 큐에서 이벤트를 꺼내 실행하게 되어 있다.

하지만 조금 더 꼬아서 생각해보자. 정해진 시간은 100ms라고 가정. 그러면 setInterval이 처음 실행할 때는 100ms시간대에서 지정된 코드(A)를 실행할 것이다. 그리고 200ms라는 시간대가 되면 다시 한번 지정된 코드(B)를 실행하려 할 것이다. 하지만 이전 코드(A) 지연 등의 이유로 실행할 수 없는 상태라면 setInterval은 현재 실행할 코드(B)를 큐에 저장한다. 그리고 300ms라는 시간대가 되어 다시 지정된 코드(C)를 실행하려 한다. 하지만 이전코드(A가 아직 끝나지 않은 상태에서 큐에 이미 실행할 코드(B)가 저정되어 있다면 setInterval은 현재 실행할 코드(C)를 무시한다.

setInterval은 정해진 시간 간격내에서 지정된 코드가 실행되는 경우 깔끔하게 처리할 수 있는 함수이다.

하지만 지정된 코드가 지연되어 다음 이벤트 발생시키기까지 영향을 끼치는 경우 "무시 당하는 이벤트"가 생길 염려가 있다.

 

1.2) setTimeout

setTimeout함수는 단 한번 지정된 코드를 실행하지만 재귀호출 등의 방법을 이용해서 반복적으로 호출할 수 있다.

setTimeout함수는 지정된 시간만큼을 기다린 후 지정된 코드를 실행한다. 그리고 다음 호출하는 시기는 지정된 코드 내에서 정의가 가능하다.

function foo() {
  // process..
  loop = setTimeout(function() { foo() }, 1000);
}
var loop = setTimeout(function() { foo() }, 1000);

위 코드는 지정된 코드(process주석처리된 것) 이후에 다시 setTimeout으로 재귀호출을 하고 있다. 이렇게 처리를 한다면 setInterval에서 봤던 이벤트가 무시당할 일은 없다.

예를 들어, setTimeout을 실행하면 처음 지정된 간격만큼 기다린 후 지정된 코드를 실행한다. 그리고 지정된 코드가 끝난 시점에서 다시 setTimeout함수를 호출한다. 그러면 지정된 코드가 지연되더라도 모든 처리가 끝난 다음 setTimeout을 호출하기 때문에 이벤트가 중첩될 일은 없을 것이다. (ajax 등의 비동기적 코드가 있다면 콜백함수처럼 만들어야 할 필요는 있다.)

 

---

 

대기시간이 0인 setTimeout

setTimeout(func, 0)이나 setTimeout(func)을 사용하면 setTimeout의 대기사간을 0으로 설정 할 수 있다. 이렇게 대기 시간을 0으로 설정하면 func을 가능한 빨리 실행할 수 있다. 다만, 이때 스케줄러는 현재 실행중인 스크립트의 처리가 종료된 이후에 스케줄링한 함수를 실행한다.

이런 특징을 이용하면 현재 스크립트의 실행이 종료된 "직후에" 원하는 함수를 실행될 수 있게 해준다.

아래 예시를 실행하면 얼럿창에 "Hello"와 "World"가 이어서 출력된다.

setTimeout(() => alert('World'));
alert('Hello');

위 예시에서 첫 번째 줄은 "'0밀리초 후에 함수 호출하기'라는 할 일을 계획표에 기록"해주는 역할을 한다. 그런데 스케줄러는 현재 스크립트(alert함수)의 실행이 종료되고 나서야 "계획표에 어떤 할 일이 적혀 있는지 확인"하므로, "Hello"가 먼저, "World"은 그 다음 출력된다.

대기시간이 0인 setTimeout을 활용한 브라우저 환경에서의 사례는 Event loop: microtasks and macrotasks에서 자세히 다룬다.

 

❗️브라우저 환경에서 실제 대기 시간은 0이 아니다.

브라우저는 HTML5표준에서 정한 중첩 타이머 실행 간견 관련 제약사항을 준수한다. 해당 표준엔 "다섯 번째 중첩 타이머 이후엔 대기 시간을 최소 4밀리초 이상을 강제해야 한다."라는 사항이 명시되어 있다.

예시를 통해 이 제약사항을 이해해보자. 예시에 쓰인 setTimeout은 지연없이 함수 run을 다시 호출할 수 있게 스케줄링 되어있다. 배열times에는 실제 지연 간격에 대한 정보가 기록되도록 해놓았다. 배열 times에 어떤 값이 저장되는지 알아보자.

let start = Date.now();
let times = [];

setTimeout(function run() {
// 이전 호출이 끝난 시점과 현재 호출이 시작된 시점의 시차를 기록.
times.push(Date.now() - start);

// 지연 간격이 100ms를 넘어가면, array를 얼럿창에 띄워줌.
if(start + 100 < Date.now()) alert(times);
	// 지연 간격이 100ms를 넘어가지 않으면 재스케줄링함.
else setTimeout(run);
});

// 출력창 예시:
// 1,1,1,1,5,10,14,19,23,29,33,39,42,47,52,56,61,67,72,77,83,88,93,96,102

초기 타이머들은(스펙에 적힌 것처럼) 지연 없이 바로 실행된다. 그런데 다섯번 째 중첩 타이머 이후엔 지연 간격이 4밀리초 이상이 되어 5,10,14,19..와 같은 값이 저장되는 것을 볼 수 있다.

이런 제약 사항은 setTimeout뿐만 아니라 setInterval에도 적용된다. setInterval(f)도 처음 몇 번은 함수 f를 지연없이 실행하지만, 나중엔 지연 간격을 4밀리초 이상으로 늘려버린다.

이는 오래전부터 있던 제약인데, 구식 스크립트 중 일부는 아직 이 제약에 의존하는 경우가 있어서 스펙도 이 제약사항을 변경하지 않고 명시하고 있다

한편, 서버측엔 이런 제약이 없다. Node.js의 process.nextTick과 setImmediate를 이용하면 비동기 작업을 지연 없이 실행할 수 있다. 위에서 언급된 제약은 브라우저에 한정된다.

 

요약

• setInterval(func, delay, ..args)과 setTimeout(func, delay, ..args)은 delay밀리초 후에 func을 규칙적으로, 또는 한번 실행하도록 해준다.
• setInterval / setTimeout을 호출하고 반환받은 값을 clearInterval / clearTimeout에 넘겨주면 스케줄링을 취소할 수 있다.
• 중첩 setTimeout을 사용하면 setInterval을 사용한 것보다 유연한 코드를 작성할 수 있다. 지연간격이 보장되는 것 또한 이점이다.
• 대기시간이 0인 setTimeout(setTimeout(func, 0) 이나 setTimeout(func))을 사용하면 "현재 스크립트의 실행이 완료된 후에 가능한 빠르게" 원하는 함수를 호출할 수 있다.
• 지연없이 중첩 setTimeout에서 5회 이상 호출하거나 지연없는 setInterval에서 호출이 5회이상 진행되면, 4밀리초 이상의 지연 간격을 강제적으로 더해준다. 이는 브라우저에서만 적용되는 사항이며, 하위 호환성을 위해 유지되고 있다.

 

모든 스케줄링 메서드가 명시한 지연 간격을 보장하지 않는다는 점에 유의해야 한다.

아래와 같은 상황에서 브라우저 내 타이머가 느려지면 지연 간격이 보장되지 않는다.

• CPU가 과부하 상태인 경우
• 브라우저 탭이 백그라운드 모드인 경우
• 노트북이 배터리에 의존해서 구동중인 경우

이런 상황에서 타이머의 최소 지연 시간은 300밀리초에서 심하면 1000밀리초까지 늘어난다. 연장 시간은 브라우저나 구동중인 운영체제의 성능 설정에 따라 다르다.

 

 

과제

일초간격으로 숫자 출력하기

from에 명시한 숫자부터 to에 명시한 숫자까지 출력해주는 함수 printNumbers(from, to)를 만들어보자. 숫자는 일 초 간격으로 출력되어야 한다.

두 가지 방법을 사용해 만들어야 한다.

1. setInterval을 이용한 방법
2. 중첩setTimeout을 이용한 방법

해답 :

1. setInterval을 이용한 방법
   setInterval

function printNumbers(from, to) {
  let current = from;
  let timerId = setInterval(function() {
    alert(current);
    if(current === to) {
      clearInterval(timerId);
    }
    current++;
  }, 1000);
}

// usage:
printNumbers(5, 10);

 

2. 중첩 setTimeout을 이용한 방법

function printNumbers(from, to) {
  let current = from;
  setTimeout(function go() {
    alert(current);
    if(current < to) {
      setTimeout(go, 1000);
    }
    current++;
  }, 1000);
}

// usage:
printNumbers(5, 10);

두 방법 모두에서 최초 호출 이전에(첫 번째 얼럿 창이 뜨기 전에)1000ms의 지연 간격을 두었다는 점에 주목하길 바란다.

초기 지연시간 없이 함수를 바로 실행하려면 아래와 같이 별도의 줄에서 함수를 호출해줘야 한다.

function printNumbers(from, to) {
	let current = from;
  function go() {
    alert(current);
    if(current === to) {
      clearInterval(timerId);
    }
    current++;
  }
  go();
  let timerId = setInterval(go, 1000);
}
printNumbers(5, 10);

 

setTimeout은 무엇을 보여줄까?

아래 코드에선 setTimeout을 이용해 호출을 스케줄링하고 있다. 그런데 그 아래 코드에선 실행 시간이 100ms이상 걸리는 무거운 작업을 하고 있다.

이런 경우 setTimeout에 넘겨준 함수는 언제 실행될까?

1. 반복문 실행 후
2. 반복문 실행 전
3. 반복문이 실행되는 시점

얼럿창엔 어떤 값이 출력될까?

let i = 0;
setTImeout(() => alert(i), 100); // ?

// 아래 반복문을 다 도는데 100ms 이상의 시간이 걸린다고 가정.
for(let j = 0; j < 10000000; j++) {
  i++;
}

 

해답 :

setTimeout은 현재 실행중인 코드의 실행이 종료되었을 때 실행된다.

반복문 실행이 종료되고 난 후 i는 10000000이 되므로, 얼럿 창엔 10000000이 출력된다.

let i = 0;
setTimeout(() => alert(i), 100); // 10000000이 출력된다.

// assume that the time to execute this function is > 100ms
for(let j = 0; j < 10000000; j++) {
  i++;
}