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

자바스크립트로 개발을 시작하게 되면 꼭 한번 씩은 만나게 되지만 별로 대수롭지 않게 넘어가는 함수 2개가 있습니다. 바로 setTimeout() 함수와 setInterval() 함수인데요. 이번 포스팅에서는 자바스크립트의 타이머를 사용하는 이 두 내장 함수에 대해서 한 번 알아보려고 합니다.

setTimeout() 사용법

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있습니다.

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

간단한 예로, 2초를 기다린 후에 어떤 문자열을 콘솔에 출력해보겠습니다.

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

2초 후에 실행됨

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

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

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

7

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

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

// 아무 것도 출력 안 됨

setInterval() 사용법

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데요. 이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있습니다.

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

간단한 예로, setInterval() 함수를 사용하여 콘솔에 현재 시간을 2초마다 출력해보겠습니다.

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

Sun Dec 12 2021 12:29:06 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:08 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:10 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:12 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:14 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:16 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:18 GMT-0500 (Eastern Standard Time)

다른 예로, 0과 9 사이의 수를 무작위로 생성하여 2초마다 출력해보겠습니다.

setInterval(() => console.log(Math.floor(Math.random() * 10)), 2000);

3
2
8
3
1
9
4
8
3
0
9
5
1
3
1

숫자를 변수에 저장해놓고 2초 마다 1씩 증가시키는 것도 가능합니다.

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

1
2
3
4
5
6
7
8
9
10

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);

마치면서

지금까지 자바스크립트의 타이머를 사용하는 내장 함수인 setTimeout() 함수와 setInterval() 함수에 대해서 살펴보았습니다.

마지막으로 setTimeout() 함수와 setInterval() 함수를 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해주는 습관을 들이시라고 말씀드리고 싶습니다. 특히, SPA(Single Page Application)을 개발할 때는 이 부분이 메모리 누수(memory leak)로 이어질 수 있기 때문에 각별히 주의가 필요합니다.