JavaScript では、タイマーを使用してコードの実行を遅らせたり、一定の間隔でコードを繰り返し実行したりできます。たとえば、タイマーを使用して、ページ上の広告を定期的に更新したり、リアルタイム クロックを表示したりできます。
JavaScript でタイマーを設定するには、setTimeout() と setInterval() の 2 つの方法があります。
| 方法 | 例証する |
|---|---|
| setTimeout() | 指定された時間 (ミリ秒単位) の後、コードを実行します。コードは 1 回だけ実行されます。 |
| setInterval() | 指定されたサイクル (ミリ秒単位) に従ってコードを繰り返し実行します。タイマーは、 clearInterval() 関数を呼び出してブラウザー ウィンドウを手動で停止または閉じるまで自動的に停止しません。 |
setTimeout()
JS の setTimeout() 関数は、指定された時間の経過後にコードを実行するために使用され、コードは 1 回だけ実行されます。
JS setTimeout() 関数の構文形式は次のとおりです。
setTimeout(function[, delay, arg1, arg2, …]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);
パラメータの説明は次のとおりです。
- function: タイマーで実行されるコードを定義する関数 (通常は無名関数を使用)。
- code: 文字列型のコード。これらのコードは、タイマーの期限が切れた後にコンパイルおよび実行されます。セキュリティ上の理由からお勧めしません。
- delay: オプションのパラメーター。タイマーがコードを実行する前に待機する時間 (ミリ秒単位) (1 秒 = 1000 ミリ秒)。このパラメーターを省略した場合は、即時実行を意味します。
- arg1, arg2, …, argN: 関数に渡される引数。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var myFun = function (str = 'JavaScript'){
document.write(str + "<br>");
};
setTimeout(myFun, 500, 'ハロー');
setTimeout(myFun, 1000);
setTimeout(function(){
document.write("タイマー<br>");
}, 1500)
setTimeout("document.write(\"setTimeout()\")", 2000);
</script>
</body>
</html> 上記のコードを実行すると、次のコンテンツが 500 ミリ秒間隔で順番に出力されます。
ハロー
JavaScript
タイマー
setTimeout()
setInterval()
JS の setInterval() 関数は、繰り返し実行できるタイマーを定義できます。各実行は、指定された時間間隔だけ待機する必要があります。
JS setInterval() 関数の構文形式は次のとおりです。
setInterval(function, delay, [arg1, arg2, …]);
setInterval(code, delay);
パラメータの説明は次のとおりです。
- function: タイマーで実行されるコードを定義する関数 (通常は無名関数を使用)。
- code: 文字列型のコード。これらのコードは、タイマーの期限が切れた後にコンパイルおよび実行されます。セキュリティ上の理由からお勧めしません。
- delay: オプションのパラメーター。タイマーがコードを実行する前に待機する時間 (ミリ秒単位) (1 秒 = 1000 ミリ秒)。このパラメーターを省略した場合は、即時実行を意味します。
- arg1, arg2, …, argN: 関数に渡される引数。
ヒント: setInterval() 関数で定義されたタイマーは、手動でブラウザ ウィンドウを停止または閉じるために clearInterval() 関数が呼び出されない限り、自動的に停止されません。
サンプルコードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p id="one"></p>
<p id="two"></p>
<script type="text/javascript">
var num = 1;
var myFun = function (){
document.getElementById('one').innerHTML += num + " ";
num ++;
};
setInterval(myFun, 500);
setInterval(function(){
var d = new Date();
document.getElementById('two').innerHTML = d.toLocaleTimeString();
}, 1000);
</script>
</body>
</html> 操作の結果は次のとおりです。
1 2 3 4 5 6 7 8 9
16:01:13
setTimeout() または setInterval() を使用してタイマーを設定する場合、これら 2 つのメソッドは、「タイマー識別子」とも呼ばれる正の整数値であるタイマーの一意の ID を生成します。 ID へのクリアが可能です。
clearTimeout() または clearInterval() 関数を使用して、それぞれ setTimeout() または setInterval() 関数によって作成されたタイマーをクリアできます。 clearTimeout() または clearInterval() 関数を呼び出すには、パラメーターとしてタイマーの一意の ID を指定する必要があります。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<p>現在時刻：<span id="clock"></span></p>
<button onclick="stopClock(this);">停止</button><hr>
<button onclick="delayedAlert(this);">2秒後にアラートを表示</button>
<button onclick="clearAlert();">キャンセル</button>
<script type="text/javascript">
var intervalID;
function showTime() {
var d = new Date();
document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
function stopClock(e) {
clearInterval(intervalID);
e.setAttribute('disabled', true)
}
intervalID = setInterval(showTime, 1000);
var timeoutID;
var that;
function delayedAlert(e) {
that = e;
timeoutID = setTimeout(showAlert, 2000);
e.setAttribute('disabled', true)
}
function showAlert() {
alert('これはアラートです。');
that.removeAttribute('disabled');
}
function clearAlert() {
clearTimeout(timeoutID);
that.removeAttribute('disabled');
}
</script>
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
