JavaScriptタイミングイベント
1
2
3
4
5
6
7
8
9
10
11
12
JavaScriptは時間間隔で実行できます。
これをタイミングイベントと呼びます。
タイミングイベント
windowオブジェクトを使用すると、指定された時間間隔でコードを実行できます。
これらの時間間隔は、タイミングイベントと呼ばれます。
JavaScriptで使用する2つの主要な方法は次のとおりです。
setTimeout(function, milliseconds)
指定されたミリ秒数待機した後、関数を実行します。
setInterval(function, milliseconds)
setTimeout()と同じですが、関数の実行を継続的に繰り返します。
setTimeout()とsetInterval()はどちらもHTML DOM Windowオブジェクトのメソッドです。
setTimeout()メソッド
<div> window.setTimeout(<i>function</i>,<i> milliseconds</i>);</div>
window.setTimeout()メソッドは、windowプレフィックスなしで記述できます。
最初のパラメーターは、実行する関数です。
2番目のパラメーターは、実行前のミリ秒数を示します。
例
ボタンをクリックします。3秒待つと、ページに「Hello」というアラートが表示されます。
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
実行を停止するには?
clearTimeout()メソッドは、setTimeout()で指定された関数の実行を停止します。
<div>window.clearTimeout(<em>timeoutVariable</em>)</div>
window.clearTimeout()メソッドは、windowプレフィックスなしで記述できます。
clearTimeout()メソッドは、setTimeout()から返された変数を使用します。
<div>myVar = setTimeout(<i>function</i>,<i> milliseconds</i>);
clearTimeout(myVar);</div>
関数がまだ実行されていない場合は、clearTimeout()メソッドを呼び出して実行を停止できます。
例
上記と同じ例ですが、「停止」ボタンが追加されています。
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
setInterval()メソッド
setInterval()メソッドは、指定された時間間隔ごとに指定された関数を繰り返します。
<div> window.setInterval(<i>function</i>,<i> milliseconds</i>);</div>
window.setInterval()メソッドは、windowプレフィックスなしで記述できます。
最初のパラメーターは、実行する関数です。
2番目のパラメーターは、各実行間の時間間隔の長さを示します。
この例では、「myTimer」という関数を1秒ごとに実行します(デジタル時計と同様)。
例
現在の時刻を表示します。
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
1秒は1000ミリ秒です。
実行を停止するには?
clearInterval()メソッドは、setInterval()メソッドで指定された関数の実行を停止します。
<div> window.clearInterval(<em>timerVariable</em>)</div>
window.clearInterval()メソッドは、windowプレフィックスなしで記述できます。
clearInterval()メソッドは、setInterval()から返された変数を使用します。
<div>let myVar = setInterval(<i>function</i>,<i> milliseconds</i>);
clearInterval(myVar);</div>
例
上記と同じ例ですが、「時間停止」ボタンを追加しました:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
その他の例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。