[JavaScript] setInterval() 함수, setTimeout() 함수

setTimeout()

 

어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야 하는 경우에 자바스크립트의 setTimeout() 함수 사용.

 

setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고,

두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다.

 

ex> 2초를 기다린 후 문자열을 콘솔에 출력하기

 

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

 

 

setTimeout() 함수는 세번째 인자부터는 가변 인자를 받는데,

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

 

ex> 두 개의 수를 인자로 받아 더한 값을 출력해주는 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() 함수를 사용.

 

ex 1 > 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)

---

ex 2 > 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() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.

 

---

setTimeout() 함수와 setInterval() 함수를 사용한 후에는

반드시 clearTimeout() 함수와 clearInterval() 함수를 사용해서 타이머를 청소해주는 습관을 들여야 한다.

 

특히, SPA(Single Page Application)을 개발할 때는

이 부분이 메모리 누수(memory leak)로 이어질 수 있기 때문에 각별히 주의가 필요 !!