[JS] setTimeout / setInterval

See the Pen [JS] setTimeout / setInterval 예제 by mill (@millfeel) on CodePen.

호출 스케줄링	설명
setTimeout	지정한 시간이 지난 후 실행한다.
setInterval	지정한 시간을 기준으로하여 반복적으로 실행한다.
clearTimeout	setTimeout/setInterval을 호출하고 반환받은 값을 clearTimeout/clearInterval에 넘겨주면 스케줄링을 취소 할 수 있다.
clearInterval

*css의 animation과 비교한다면 delay와 같다.

---

setTimeout (= setInterval)

문법

setTimeout( function | code, [delay], [arg1], [arg2], ... )

[function | code]

• 실행하고자 하는 코드로, 함수 또는 문자열이 올 수 있다.
• 대개는 함수가 사용된다.
• 하위 호환성을 위해 문자열도 받을 수 있게 해놓았지만 추천하진 않는다. (이유는 모르겠음)
• 문자열을 사용해야만 하는 경우에는 아래와 같이 익명 화살표 함수를 사용하도록 한다.

setTimeout(() => alert(1), 2000);

[delay]

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

 

[arg1, arg2 ...]

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

function timerId(name){
  alert(name + '님 환영합니다.');
}

setTimeout(timerId, 2000, 'mill');

---

clearTimeout (= clearInterval)

setTimeout을 호출하면 '타이머 식별자(timer identifier)'가 반환된다.

스케줄링을 취소하고 싶을 땐 식별자(timerId)를 사용하면 된다.

---

Q. 타이머 식별자란?

아래의 코드에서 alert에 반환된 값이 타이머 식별자이다.

(setTimeout는 alert처럼 브라우저가 시작되면 자동으로 실행된다.)

let timerId = setTimeout(() => console.log(10), 2000);
alert(timerId);

왼쪽부터 크롬 / 파이어폭스 / 엣지의 식별자 값

다른 호스트 환경에선 타이머 식별자가 숫자형 이외의 자료형 일 수 있다.

자료형이 각자 다른 이유는 스케줄링에 관한 명세가 별도로 존재하지 않기 때문에 호스트 환경마다 약간의 차이가 있을 수 밖에 없다고 한다.

---

스케줄링 취소하는 방법

스케줄링을 취소하고 싶을 땐 아래와 같이 반환된 식별자(timerId)를 clearTimeout에 사용하면 된다.

let timerId = setTimeout(...);
clearTimeout(timerId);

---

중첩 setTimeout

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

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

Q. 그렇다면, setInterval과 setTimeout의 차이는 무엇일까?

[예제를 테스트 방법]
1. "START 버튼"을 눌러주세요.
2. 5초 이상 "알림창의 확인 버튼"을 누르지 말아주세요. (딜레이 유도)
3. "알림창의 확인 버튼"을 누르고 딜레이의 차이를 비교해주세요.
4. 알림창을 멈추고 싶다면 "STOP버튼"을 눌러주세요.

[중첩 setTimeout 예제]

See the Pen [JS] 중첩 setTimeout by mill (@millfeel) on CodePen.

[setInterval 예제]

See the Pen [JS] setInterval by mill (@millfeel) on CodePen.

- 중첩 setTimeout은 딜레이 X (num++을 실행하는데 '소모되는' 시간을 포함X)

- setInterval은 딜레이 O (num++을 실행하는데 '소모되는' 시간도 지연 간격에 포함O)

 

즉, setTimeout을 이용하면 지연 간격을 보장하지만, setInterval은 지연 간격을 보장하지 않는다.

---

[공부 좌표]

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

 

[보류]

대기 시간이 0인 setTimeout