setTimeout()은 자주 사용해서 익숙하지만 setInterval()은 자주 사용하지 않아 제대로 알아볼겸 정리를 해보았다!

---

setTimeout() 사용법

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

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

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

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

// 2초 뒤에 "2초 후에 실행됨" 출력

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

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

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

// 2초 뒤에 "7" 출력

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

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

// (아무것도 출력 안 됨)

---

setInterval() 사용법

웹페이지의 특정 부분을 주기적으로 업데이트 해줘야하거나, API로부터 변경된 데이터를 주기적으로 받아와야 하는 경우에 많이 사용한다. 이럴땐 단 한번만 호출되는 setTimeout보단 setInterval이 좀 더 편하게 사용할 수 있습니다.

setInterval 함수도 위의 setTimeout함수와 비슷하게 첫 번째인자로 콜백함수를 받고, 두 번째 인자로 밀리초단위(ms)를 받는다.

setInterval(() => console.log("2초마다 찍힘"), 2000)

// 2초후 "2초마다 찍힘"
// 2초후 "2초마다 찍힘"
// 2초후 "2초마다 찍힘"
// 2초후 "2초마다 찍힘"

숫자를 변수에 저장해놓고 1씩 증가시키는 것도 가능하다.

let count = 0

setInterval(() => console.log(count++), 1000)

// 1초후 0
// 1초후 1
// 1초후 2
// 1초후 3
// 1초후 4

간단한 예로, 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() 함수를 사용한 후에는 반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해주는 습관을 들이면 좋다고 한다!