[JavaScript] 타이머 사용하기

개념정리

delay의 단위는 1ms(1,000분의 1초)다.

delay = 1ms

• setTimeout(Callback function, delay) : delay 이후에 Callback function을 실행한다.
• setInterval(Callback function, delay) : delay마다 Callback function을 반복 실행한다.
• setImmediate(Callback function) : Callback function을 즉시 실행한다.

위와 같은 타이머 함수들은 모두 timeoutID를 반환한다. timeoutID은 타이머를 식별할 때 사용한다.

아래와 같은 함수를 사용하면 timeoutID를 사용하여 타이머를 취소할 수 있다.

• clearTimeout(timeoutID) : timeoutID로 지정된 setTimeout을 취소한다.
• clearInterval(timeoutID) : timeoutID로 지정된 setInterval을 취소한다.
• clearImmediate(timeoutID) : timeoutID로 지정된 setImmediate를 취소한다.

 

💡 Callback 함수를 사용하기 때문에 비동기로 처리된다.

 

---

타이머 사용법 - set

Code

setTimeout(() => {
    console.log('setTimeout - 1초 후 실행');
}, 1000);

setInterval(() => {
    console.log('setInterval - 1초마다 실행');
}, 1000);

setImmediate(() => {
    console.log('setImmediate - 즉시 실행');
});

Console

setImmediate - 즉시 실행
setTimeout - 1초 후 실행
setInterval - 1초마다 실행
setInterval - 1초마다 실행
setInterval - 1초마다 실행
...

제일 먼저 setImmediate 함수가 먼저 실행되고, 그다음 setTimeout 함수가 1초 후 실행되고,

그와 동시에 setInterval 함수가 실행되면서 1초마다 계속 Callback 함수가 호출된다.

💡 setTimeout 함수와 setInterval 함수가 동시에 실행되어야 하는 게 아닌가?

setTimeout 함수와 setInterval 함수가 동시에 실행되어야 하는게 아닌가?
setTimeout 함수가 코드 상단 쪽에 위치해 있기 때문에,
JavaScript interpreter 언어라서 코드를 한 줄씩 읽기 때문에 코드 상단에 위치한 setTimeout 함수가 먼저 실행된다.

 

---

타이머 사용법 - clear

Code

const timeout = setTimeout(() => {
    console.log('setTimeout - 1.5초 후 실행');
}, 1500);

const interval = setInterval(() => {
    console.log('setInterval - 1초마다 실행');
}, 1000);

setTimeout(() => {
    clearTimeout(timeout);
    clearInterval(interval);
}, 2500);

const immediat = setImmediate(() => {
    console.log('setImmediate - 실행 안됨');
});

clearTimeout(immediat);

Console

setInterval - 1초마다 실행
setTimeout - 1.5초 후 실행
setInterval - 1초마다 실행

제일 먼저 실행되는 함수는 immediat이다. 하지만 clearImmediat 함수를 사용하여 취소했으므로 실행되지 않는다.

코드 실행 1초 후에는 interval의 Callback function 이 실행된다. 1.5초 후에는 timeout의 Callback function이 실행된다.

interval의 콜백 함수는 1초마다 실행되므로 2초가 지났을 때에도 실행된다.

코드 실행 2.5초가 지났을 때 clearTimeout과 clearInterval이 각각 timeout2와 interval을 취소한다.

마지막으로 코드 실행 후에는 log가 더 이상 남지 않고, 종료한다.

---