[JavaScript] setInterval() 함수

setInterval()

 setInterval()  메서드는 반복적으로 함수를 호출하거나 코드 snippet을 실행한다. 

이 함수는 각각의 interval을 구분해주는 interval ID를 반환하므로, clearInterval() 함수 호출을 통해 제거할 수 있다.

Syntax

setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg0)
setInterval(func, delay, arg0, arg1)
setInterval(func, delay, arg0, arg1, /* ... ,*/ argN)

반환 값

반환하는 intervalID 는 양의 정수로써 setInterval() 이 생성한 타이머를 식별할 때 사용한다.

이 값을 clearInterval() 에 전달하면 타이머를 취소할 수 있다.

setTimeout() 그리고 setInterval() 메서드는 같은 ID풀을 공유하고, clearInterval() 그리고 clearTimeout() 은 기술적으로 상호교환이 가능하다.

하지만, 혼동을 피하기 위해서 코드를 짤 때 각자 맞춰주는 것이 좋다.

Examples

Example 1 : Basic syntax

const intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');

function myCallback(a, b)
{
    // Your code here
    // Parameters are purely optional.
    console.log(a);
    console.log(b);
}

Example 2 : 두 가지 색상으로 바꾸기

아래의 예시는 Stop 버튼이 눌리기까지 1초에 한 번씩 flashtext() 함수를 호출한다.

HTML

<div id="my_box">
    <h3>Hello World</h3>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>

CSS

.go {
    color: green;
}
.stop {
    color: red;
}

JavaScript

// intervalID를 저장할 변수
let nIntervId;

function changeColor() {
  // interval이 이미 설정된 것이 잇는지 확인한다
  if (!nIntervId) {
    nIntervId = setInterval(flashText, 1000);
  }
}

function flashText() {
  const oElem = document.getElementById("my_box");
  oElem.className = oElem.className === "go" ? "stop" : "go";
}

function stopTextColor() {
  clearInterval(nIntervId);
  // 변수에 저장한 interval을 풀어준다.
  nIntervId = null;
}

document.getElementById("start").addEventListener("click", changeColor);
document.getElementById("stop").addEventListener("click", stopTextColor);

출처 : https://developer.mozilla.org/en-US/docs/Web/API/setInterval