setInterval과 clearInterval
setTimeout은 콜백 함수를 한 번만 실행하고 멈추지만, setInterval은 콜백을 정해진 주기마다 호출하며 clearInterval을 사용할 때까지 멈추지 않습니다. 다음 예제는 분이 넘어가거나 10회째가 될 때까지 5초마다 콜백을 실행합니다.
const start = new Date();
let i = 0;
const intervalId = setInterval(() => {
let now = new Date();
if(now.getMinutes() !== start.getMinutes() || ++i>10)
return clearInterval(intervalId);
console.log(`${i} : ${now}`);
}, 5*1000);
/*
1 : Wed Sep 04 2019 10:02:21 GMT+0900 (GMT+09:00)
2 : Wed Sep 04 2019 10:02:26 GMT+0900 (GMT+09:00)
3 : Wed Sep 04 2019 10:02:31 GMT+0900 (GMT+09:00)
4 : Wed Sep 04 2019 10:02:36 GMT+0900 (GMT+09:00)
5 : Wed Sep 04 2019 10:02:41 GMT+0900 (GMT+09:00)
6 : Wed Sep 04 2019 10:02:46 GMT+0900 (GMT+09:00)
7 : Wed Sep 04 2019 10:02:51 GMT+0900 (GMT+09:00)
8 : Wed Sep 04 2019 10:02:56 GMT+0900 (GMT+09:00)
*/
이 예제를 보면 setInterval이 ID를 반환한다는 사실을 알 수 있습니다. 이 ID를 써서 실행을 멈출 수 있습니다. clearInterval은 setInterval이 반환하는 ID를 받아 타임아웃을 멈춥니다.
NOTE setTimeout, setInteval, clearInterval은 모두 전역 객체(브라우저에서는 window, 노드에서는 global)에 정의되어 있습니다.