[JavaScript] setTimeout(), setInterval()

setTimeout() 

---

코드를 바로 실행하지 않고 일정 시간 기다린 후 실행하도록 도와주는 함수입니다.

- 첫번째 인자 : 실행할 코드

- 두번째 인자 : 지연 시간(ms)

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

예시로 5초 후에 위와 같은 문자열을 콘솔에 출력해보는 setTimeout()함수를 작성하였습니다. 추가로 setTimeout() 함수는 세번째 인자로 가변 인자를 받는데요. 첫번째 인자로 받은 실행코드 함수에 들어갈 인자를 명시해주기 위해서 사용합니다.

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

const sum(num1, num2) {
  console.log(num1 + num2);
}

setTimeout(sum, 5000, 3, 4);

 

setInterval() 사용법

---

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나,

어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 쓰이는 함수입니다.

즉, 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다.

- 첫번째 인자 : 실행할 코드

- 두번째 인자 : 지연 시간(ms)

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

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

 

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

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

 

 

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