[책] 자바스크립트 코드 레시피 278 - 197일차

시간 주기 작업하기

• 주기적으로 작업을 처리하고 싶을 때
• 애니메이션 관련 함수를 호출하고 싶을 때

구문

setInterval(함수, 밀리초); 지정 시간 간격으로 연속 함수 호출

설명

setInterval()을 사용해 지정 밀리초 간격으로 함수를 실행할 수 있습니다. setTimeout()은 함수를 한 번만 호출하지만, setInterval()은 지정 시간 간격으로 연속 실행합니다.

실습

첫 번째 인수는 함수, 두 번째 인수는 반복 간격(밀리초 단위)을 전달하며, 함수는 익명 함수를 사용할 수 있습니다. 처리 중 this의 스코프가 변해 의도하지 않은 곳을 참조하는 경우가 발생하므로 문제 해결을 위해서는 화살표 함수를 사용하는 것이 좋습니다.

setInterval(timer, 1000); // 1000밀리초 간격으로 실행
function timer() {
  console.log('timer');
}

---

현재 시간을 표시하는 샘플을 확인해 볼 수 있습니다. console.log()로 시간을 표시하고 있으며, setInterval()을 사용해 호출하는 코드는 실행 시작 후 1초 간격으로 처리되는 것을 확인할 수 있습니다.

setInterval( () => {
  console.log('timer');
}, 1000); // 1000밀리초 간격으로 실행

---

console.log('실행 시작 시간', new Date().toLocaleTimeString());
setInterval( () => {
  console.log('setInterval 실행 시간', new Date().toLocaleTimeString());
}, 1000); // 1000밀리초 간격으로 실행

시간 주기 작업 해제하기

• setInterval() 처리를 해제하고 싶을 때

구문

clearInterval(IntervalID); 호출 해제

설명

clearInterval()을 사용해 setInterval()로 지정한 함수의 실행을 취소할 수 있습니다.

실습

setInterval()의 숫자 타입 변환값을 보관한 뒤 해제하고 싶은 타이밍에 맞춰 clearInterval()의 인수로 전달됩니다.

const intervalId = setInterval(timer, 1000);
function timer() {
  console.log('실행하기');
}
clearInterval(intervalId);

---

1초 간격의 반복 실행을 3회만 호출하고 싶을 때는 다음과 같이 작성할 수 있습니다.

const interval = setInterval(timer, 1000);
let count = 0;
function timer() {
  count = count + 1;
  console.log(count, new Date().toLocaleTimeString());
  if (count === 3) {
    clearInterval(interval);
  }
}