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 DOMWindowオブジェクトのメソッドです。
setTimeout（）メソッド
window.setTimeout(function, milliseconds);
メソッドはwindow.setTimeout()、ウィンドウプレフィックスなしで記述できます。
最初のパラメータは実行される関数です。
2番目のパラメーターは、実行までのミリ秒数を示します。
例
ボタンをクリックします。3秒待つと、ページに「こんにちは」という警告が表示されます。
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
実行を停止する方法は？
このclearTimeout()メソッドは、setTimeout（）で指定された関数の実行を停止します。
window.clearTimeout(timeoutVariable)
メソッドはwindow.clearTimeout()、ウィンドウプレフィックスなしで記述できます。
このメソッドは、 ：clearTimeout()から返された変数を使用します。setTimeout()
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
関数がまだ実行されていない場合は、次のclearTimeout()
メソッドを呼び出して実行を停止できます。
例
上記と同じ例ですが、「停止」ボタンが追加されています。
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
setInterval（）メソッド
このsetInterval()メソッドは、指定された時間間隔ごとに指定された関数を繰り返します。
window.setInterval(function, milliseconds);
メソッドはwindow.setInterval()、ウィンドウプレフィックスなしで記述できます。
最初のパラメーターは、実行される関数です。
2番目のパラメーターは、各実行間の時間間隔の長さを示します。
この例では、「myTimer」という関数を1秒に1回実行します（デジタル時計のように）。
例
現在の時刻を表示します。
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
1秒間に1000ミリ秒あります。
実行を停止する方法は？
このclearInterval()メソッドは、setInterval（）メソッドで指定された関数の実行を停止します。
window.clearInterval(timerVariable)
メソッドはwindow.clearInterval()、ウィンドウプレフィックスなしで記述できます。
このメソッドは、 ：clearInterval()から返された変数を使用します。setInterval()
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
例
上記と同じ例ですが、「停止時間」ボタンを追加しました。
<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>