[Javascript / 자바스크립트] 주기적 실행, 일정 시간 반복 실행 - setInterval()

setInterval()

 

setInterval()은 함수를 지정한 주기마다 반복 호출하는 메소드 입니다. 구문은 아래와 같습니다. 

 

setInterval(function, milliseconds)

 

반복 실행하고 싶은 함수를 function 부분에 작성하고 반복할 주기를 milliseconds 부분에 작성하면 됩니다. 이 메소드는 설정된 타이머의 ID값을 number로 반환합니다. 이를 이용해 clearInterval()로 특정 타이머를 취소할 수 있습니다. 

 

 

 

 

 

사용 예시 - setInterval()

 

간단한 예시로 3초마다 alert 창을 띄우는 함수를 만들어보겠습니다. 

 

setInterval(function () { alert('hello'); }, 3000);

위 예시처럼 익명함수를 인자로 전달할 수도 있고, 직접 함수를 선언해서 전달하는 것도 가능합니다. 

 

 

 

 

 

 

사용 예시 - clearInterval()

 

clearInterval()은 인자로 타이머의 ID 값을 받아 해당 타이머를 clear 해줍니다. 1초마다 배경색을 red와 blue 사이에 toggle 하고, 10초 뒤에 실행을 멈추는 함수를 작성해봅시다. 

 

 

var timer = setInterval(setColor, 1000);
setTimeout(stopColor, 10000);
 
function setColor() {
  var x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == 'red' ? 'blue' : 'red';
}
 
function stopColor() {
  clearInterval(timer);
}

 

이때 10초뒤 함수를 호출하기 위해 사용한 setTimeout()의 사용 방법과 예제는 아래 글에서 볼 수 있습니다. 

https://mjmjmj98.tistory.com/33

[javascript / 자바스크립트] 시간 지연 함수, delay 방법, 몇 초 후 실행 - setTimeout()

 

 

 

 

참고 사이트: https://www.w3schools.com/jsref/met_win_setinterval.asp

 

 

 

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)