창 setInterval()
예
1초마다 "Hello" 표시(1000밀리초):
setInterval(function () {element.innerHTML += "Hello"}, 1000);
매초마다 displayHello를 호출합니다.
setInterval(displayHello, 1000);
아래에 더 많은 예가 있습니다.
정의 및 사용
메서드 는 setInterval()지정된 간격(밀리초)으로 함수를 호출합니다.
메서드 는 가 호출되거나 창이 닫힐 setInterval()때까지 함수를 계속 호출합니다
.clearInterval()
1초 = 1000밀리초.
메모
함수를 한 번만 실행하려면 setTimeout()대신 메서드를 사용하십시오.
간격을 지우려면 setInterval()에서 반환된 ID 를 사용합니다.
myInterval = setInterval(function, milliseconds);
그런 다음 clearInterval()을 호출하여 실행을 중지할 수 있습니다.
clearInterval(myInterval);
또한보십시오:
통사론
setInterval(function, milliseconds, param1, param2, ...)
매개변수
| Parameter | Description |
| function | Required. The function to execute |
| milliseconds | Required. The execution interval. If the value is less than 10, 10 is used |
| param1, param2, ... | Optional. Additional parameters to pass to the function Not supported in IE9 and earlier. |
반환 값
| 유형 | 설명 |
| 번호 | 타이머의 ID입니다. 이 ID를 clearInterval()과 함께 사용하여 타이머를 취소합니다. |
더 많은 예
예시
디지털 시계처럼 시간 표시:
setInterval(myTimer, 1000);
function myTimer()
{
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
예시
clearInterval()을 사용하여 디지털 시계 중지:
const myInterval = setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction()
{
clearInterval(myInterval);
}
예시
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 + '%';
}
}
}
예시
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);
}
예시
함수에 매개변수 전달(IE9 및 이전 버전에서는 작동하지 않음):
setInterval(myFunc, 2000, "param1", "param2");
그러나 익명 기능을 사용하면 모든 브라우저에서 작동합니다.
setInterval(function() {myFunc("param1", "param2")}, 2000);
브라우저 지원
setInterval()모든 브라우저에서 지원됩니다:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |