[javascript] setTimeout과 setInterval을 같이 사용할 경우 발생하는 문제

김지엽·2023년 11월 2일

JavaScript Problem setInterval setTimeout

1. 개요

오늘 강의 중에 튜터님께서 질문하신 것중

"setTimeout과 setInterval을 같이 사용할 경우 어떤 현상이 발생할까?"

라는 질문에 답이 생각이 나지 않아 setTimeout과 setInterval에 대해 다시 공부하고 동시에 사용했을때의 현상을 알아보았다.

2. setTimeout

setTimeout은 콜백함수와 delay(지연시간)을 인자로 받아 지연시간이 지난 후 콜백함수를 실행시키는 함수이다.

내가 setTimeout에 대해 원래 알고 있는 것은 다음과 같다.

- delay를 0으로 설정해도 즉시 실행하지 않는다.

setTimeout(() => console.log("world"), 0);
console.log("hellow");

위와 같은 코드에서 setTimeout의 delay가 0이기에 world가 먼저 출력된 후 hellow라는 결과가 출력될 것 같지만 실제 결과는 다음과 같다.

위와 같은 결과가 발생하는 이유는 setTimeout의 특징 중 하나인데, setTimeout은 현재 실행하고 있는 스크립트가 종료되고 난 후 지연시간이 지나고 콜백함수를 실행시킨다.

- setTimeout을 중첩으로 사용할 경우

let count = 0;
setTimeout(function log() {
    console.log(count++);
    setTimeout(log, 500);
}, 500);

위의 코드는 setTimeout 내부에 setTimeout(log, 500)을 넣어 setInterval과 같이 주기적으로 log를 실행하는 함수이다.

결과는 다음과 같다.

위의 결과와 같이 setTimeout을 중첩시키면 setInterval과 같이 사용할 수 있다.

3. setInterval

setTimeout은 콜백함수와 delay(지연시간)을 인자로 받아 지연시간이 지날때마다 콜백함수를 실행시키는 함수이다.

- setInterval과 setTimeout을 같이 사용할 경우

let before = new Date().getTime();

setInterval(() => {
    const now = new Date().getTime();
    console.log(now - before, "만큼 지남");
    console.log("setInterval이지롱");
}, 2000);


setTimeout(() => {
    const now = new Date().getTime();
    console.log(now - before, "만큼 지남");
    console.log("setTimeout이지롱");
    for (let i=0; i<10000000000; i++) {}
}, 1500);