강의 추천:

Window setInterval() 메서드

setInterval() 정의와 사용법

setInterval() 메서드는 지정된 시간 간격(밀리초로)으로 함수를 주기적으로 호출합니다. clearInterval() 또는 창을 닫습니다.

비고:1 초 = 1000 밀리초

안내

한 번만 함수를 실행하려면 setTimeout() 메서드를 사용하십시오.

간격을 해제하려면 setInterval() 반환된 id:

myInterval = setInterval(function, milliseconds);

그런 다음 다음과 같이 호출하여 clearInterval() 실행을 중단하기 위해

clearInterval(myInterval);

다른 참고 자료:

clearInterval() 메서드

setTimeout() 메서드

clearTimeout() 메서드

예제

예제 1

"Hello"을 매초에 한 번 표시합니다（1000 밀리초）：

setInterval(function () {element.innerHTML += "Hello"}, 1000);

직접 시도해 보세요

예제 2

displayHello을 매초에 한 번 호출합니다：

setInterval(displayHello, 1000);

직접 시도해 보세요

하단 페이지에서 더 많은 예제를 제공합니다.

문법

setInterval(function, milliseconds, param1, param2, ...)

매개변수

매개변수 설명
function 必需. 실행할 함수
milliseconds

必需. 실행 간격

값이 10보다 작으면 10을 사용합니다.
param1, param2, ...

선택 사항. 함수에 전달할 추가 매개변수

IE9 및 이전 버전은 지원하지 않습니다.

반환 값

타입 설명
숫자

타이머의 ID

이 id를 다음과 함께 설정하십시오 clearInterval() 타이머를 취소하기 위해 함께 사용합니다.

브라우저 지원

모든 브라우저가 지원합니다 setInterval()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持

更多实例

예제 3

시계와 같이 시간을 표시합니다:

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

직접 시도해 보세요

예제 4

setInterval()를 사용하여 시계를 멈축합니다:

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

직접 시도해 보세요

예제 5

setInterval()와 clearInterval()를 사용하여 동적 진행 표시줄을 생성합니다:

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

직접 시도해 보세요

예제 6

500밀리초마다 두 가지 배경색 사이에서 전환了一次:

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

직접 시도해 보세요

예제 7

파라미터를 함수에 전달합니다(IE9 및 이전 버전에서는 작동하지 않습니다):

setInterval(myFunc, 2000, "param1", "param2");

직접 시도해 보세요

하지만, 익명 함수를 사용하면 모든 브라우저에 적용됩니다:

setInterval(function() {myFunc("param1", "param2")}, 2000);

직접 시도해 보세요