setTimeout()과 setInterval()

setTimeout()

자바스크립트에서 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우에 사용된다. setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두 번째 인자로는 지연시간을 밀리초(ms) 단위로 받는다.

ex)

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

 

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

 

예를 들어, 두 개의 수를 인자로 받아 더한 값을 출력해주는 add() 라는 함수에 인자로 3과 4를 넘겨 2초를 기다린 후에 호출해보는 코드를 작성해보자.

function add(x, y) {
    console.log(x + y);
}
setTimeout(add, 2000, 3, 4);

 

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

const timeoutID = setTimeout(() => console.log("5초 후에 실행됨."), 5000);
clearTimeout(timeoutID); // 아무것도 출력하지 않음.

 

setInterval()

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

ex)

setInterval(() => console.log(new Date()), 2000);
// 결과
// 2023-09-25T01:11:47.466Z
// 2023-09-25T01:11:49.469Z
// 2023-09-25T01:11:51.472Z
// 2023-09-25T01:11:53.474Z
// 2023-09-25T01:11:55.476Z
// 2023-09-25T01:11:57.479Z

 

ex2) 숫자를 2초마다1씩 증가

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

// 결과
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8

 

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

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

 

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

 

 

[참고]

https://www.daleseo.com/js-timer/

자바스크립트의 setTimeout()과 setInterval() 함수