[JS] setInterval과 setTimeout의 차이

setTimeout()

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우

setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.

setTimeout(() => console.log("3초 후에 실행됨"), 3000); //3초 후에 실행됨

타임아웃 아이디(Timeout ID)라고 불리는 숫자를 반환하는데, setTimeout() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리킨다. 이 값을 인자로 clearTimeout() 함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다.

const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);

setInterval()

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우

어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.

let count = 0;
setInterval(() => console.log(++count), 2000);

// 2초마다 0,1,2,3,4 ~~ 쭉 출력됨.

setInterval()함수는 인터벌 아이디(Interval ID)라고 불리는 숫자를 반환하는데, 이는 setInterval() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리킨다. 이 값을 인자로 clearInterval() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.

const intervalId = setInterval(() => console.log(new Date()), 2000);
< Sun Dec 12 2021 12:45:31 GMT-0500 (Eastern Standard Time)
< Sun Dec 12 2021 12:45:33 GMT-0500 (Eastern Standard Time)
< Sun Dec 12 2021 12:45:35 GMT-0500 (Eastern Standard Time)
clearInterval(intervalId);