[Javascript] setTimeout() setInterval()

1. setTimeout()

---

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

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); // 아무 것도 출력 안 됨

 
 
 
 

2. setInterval()

---

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있다. 이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있다.
 
setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용다. 함수 API는 setTimeout() 함수와 유사하다. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.
 
 
다음은 setInterval() 함수를 사용하여 콘솔에 현재 시간을 2초마다 출력하는 코드이다.

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

 
 
다음은 0과 9 사이의 수를 무작위로 생성하여 2초마다 출력하는 코드이다.

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

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

const intervalId = setInterval(() => console.log(new Date()), 2000);
Fri Jul 14 2023 16:57:33 GMT+0900 (한국 표준시)
Fri Jul 14 2023 16:57:35 GMT+0900 (한국 표준시)
Fri Jul 14 2023 16:57:37 GMT+0900 (한국 표준시)
clearInterval(intervalId);

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