📌 setTimeout( )

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우 setTimeOut() 함수를 사용할 수 있다.

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

setTimeout(() => console.log("2초 후 실행!"), 2000);

세 번째 인자부터는 가변인자를 받는데, 첫 번째 인자로 넘어온 함수가 인자를 받는 경우 이 함수에 넘길 인자를 명시해주기 위해 사용한다.

function add(x, y) {
  console.log(x+y);
}

setTimeout(add, 2000, 3, 4);

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

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

clearTimeout(timeoutId);

📌 setInterval( )

웹페이지의 특정 부분을 주기적으로 업데이트 해줘야 하거나, 어떤 API로부터 변경된 데이터를 주기적으로 받아와야 하는 경우 setInterval() 함수를 사용할 수 있다.
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

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

setInterval(() => console.log(new Date()), 2000);

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

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

const intervalId = setInterval(() => console.log(new Date(), 2000);

clearInterval(intervalId);

📌 Tip

setTimeout()함수와 setInterval()함수를 사용한 후에는 반드시 clearTimeout()함수와 clearInterval()함수를 사용해서 타이머를 청소해주는 습관을 들여야한다.
SPA(Single Page Application)를 개발할 경우 메모리 누수(memory leak)로 이어질 수 있다.

SPA를 사용하면 같은 페이지에 머무르게 되므로 다시 로드되지 않은 페이지에서 점점 더 많은 메모리를 사용함에 따라 성능에 영향을 미치고 브라우저 탭이 충돌할 수 있다.
setTimeout()과 setInterval()은 청소해주지 않는 한 타이머 콜백의 객체에 대한 참조가 계속해서 활성 상태로 유지된다.
따라서 clearTimeout()과 clearInterval()을 통해 메모리 누수 (memory leak)을 방지해줘야 한다.

< 참고 : https://www.daleseo.com/js-timer/
https://jeongjihun.github.io/posts/Causes-of-Memory-Leaks-in-JavaScript-and-How-to-Avoid-Them >