[J.S] setTimeout() 과 setInterval() ????

 

SetTimeout() 란??

• setTimeout() 메서드는 만료된 후 함수나 지정한 코드조각을 실행하는 타이머를 설정하는 함수이다.
• 즉, 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 존재하는데 이럴때 setTimeout() 함수를 사용한다.
• 첫번쨰 인자로 실행할 코드를 담고있는 함수를 받고, 두번째 인자로 지연시간을 밀리초(ms) 단위로 받는다. 세번째 인자부터 가변인자를 받는데, 첫번쨰 인자로 넘어온 함수가 인자를 받는 경우 이 함수에 넘길 인자를 명시해서 사용해야 한다.

setTimeout(() => {
  console.log("첫 번째 메시지");
}, 5000);
setTimeout(() => {
  console.log("두 번째 메시지");
}, 3000);
setTimeout(() => {
  console.log("세 번째 메시지");
}, 1000);

// 콘솔 출력:

// 세 번째 메시지
// 두 번째 메시지
// 첫 번째 메시지

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() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.
• 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.

// 함수를 사용하여 콘솔에 현재 시간을 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() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있습니다.

---

주의할점?!

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

 

참고

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