ウィンドウsetInterval()
例
「こんにちは」を毎秒(1000ミリ秒)表示します。
setInterval(function () {element.innerHTML += "Hello"}, 1000);
毎秒displayHelloを呼び出します。
setInterval(displayHello, 1000);
以下のその他の例。
定義と使用法
このsetInterval()
メソッドは、指定された間隔(ミリ秒単位)で関数を呼び出します。
setInterval()
メソッドは、
clearInterval()
が呼び出されるか、ウィンドウが閉じられるまで、関数の呼び出しを続行します。
1秒= 1000ミリ秒。
ノート
関数を1回だけ実行するには、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ミリ秒ごとに1回、2つの背景色を切り替えます。
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 |