[JavaScript] 자바스크립트에서 시간 주기 작업하기

214_자바스크립트에서 시간 주기 작업하기

[적용]

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

---

[문법]

메소드	의미	반환
setInterval( 함수, 밀리초)	지정 시간 간격으로 연속 함수 호출	숫자

---

[내용]

setInterval()을 사용해 지정 밀리초 간격으로 함수를 실행할 수 있다.

setTimeout()은 함수를 한 번만 호출하지만, setInterval()은 지정 시간 간격으로 연속 실행한다.

JavaScript                                                                                                                                                          main.js

setInterval(timer1, 1000);  // 1000밀리초 간격으로 실행
function timer1() {
  // 처리 작업
}

 

첫 번째 인수는 함수, 두 번째 인수는 반복 간격(밀리초 단위)을 전달하며,

함수는 익명 함수(Anonymous Fuction)를 사용할 수 있다.

처리 중 this의 스코프가 변해 의도하지 않은 곳을 참조하는 경우가 발생하므로

문제 해결을 위해서는 화살표 함수(Arrow Function)를 사용하는 것이 좋다.

JavaScript                                                                                                                                                          main.js

setInterval(() => {
  // 처리 작업
}, 1000);  // 1000밀리초 간격으로 실행

 

현재 시간을 표시하는 예시를 확인해 보자.

console.log()로 시간을 표시하고 있으며, setInterval()을 사용해 호출하는 코드는

실행 시작 후 1초 간격으로 처리되는 것을 확인할 수 있다.

JavaScript                                                                                                                                                          main.js

console.log('실행 시작 시간', new Date().toLocaleTimeString());

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

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김