JavaScriptタイミングイベント

❮前次の章❯

JavaScriptは、時間間隔で実行することができます。

これは、イベントのタイミングと呼ばれています。

タイミングイベント

ウィンドウオブジェクトは、指定された時間間隔でコードの実行を可能にします。

これらの時間間隔は、イベントのタイミングと呼ばれています。

JavaScriptで使用するには、2つの重要な方法は、次のとおりです。

setTimeout( function, milliseconds )
指定されたミリ秒数を待機した後、関数を実行します。
setInterval( function, milliseconds )
同じsetTimeout()が、連続関数の実行を繰り返します。

setTimeout()とsetInterval() HTML DOM Windowオブジェクトの両方の方法です。

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()メソッドを：

例

上記のように、しかし、追加された「停止」ボタンと同じ例：

»それを自分で試してみてください

setInterval()メソッド

setInterval()メソッドは、すべての与えられた時間間隔で与えられた関数を繰り返します。

window.setInterval(function, milliseconds);

window.setInterval()メソッドは、ウィンドウの接頭辞なしで書き込むことができます。

最初のパラメータは、実行する機能です。

2番目のパラメータは、各実行の間の時間間隔の長さを示しています。

この例では、呼び出された関数を実行"myTimer" （デジタル時計のような）1秒に1回を。

例

現在の時刻を表示します。

var myVar = setInterval(myTimer, 1000);

function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

»それを自分で試してみてください

1秒間に1000ミリ秒があります。

実行を停止する方法？

clearInterval()メソッドは、で指定された関数の実行を停止しsetInterval()メソッドを。

window.clearInterval( timerVariable )

window.clearInterval( )メソッドは、ウィンドウの接頭辞なしで書き込むことができます。

clearInterval()メソッドから返される変数使用しsetInterval() ：

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

例

同じ例上記のように、私たちは「時間停止」ボタンを追加しました：

<p id="demo"></p>

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>

»それを自分で試してみてください