|
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScriptは、一定の時間間隔で実行できます。 これは、timing イベントと呼ばれます。 |
window オブジェクトは、指定した時間間隔でコードの実行が可能です。
この時間間隔をtimingイベントと言います。
JavaScriptで使用する主な2つのメソッドは次の通りです：
setTimeout() と setInterval() は、両方とも HTML DOM Window オブジェクトのメソッドです。
window.setTimeout(function, milliseconds);
window.setTimeout() メソッドは、windowの接頭辞を付けないで記述することができます。
最初のパラメータは、実行する関数です。
2番目のパラメータは、実行する前のミリ秒数を表します。
ボタンをクリックします。3秒後に、ページへ "Hello" がアラート表示されます：
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
Try it Yourself »
clearTimeout()メソッドは、setTimeout()で指定された関数の実行を停止します。
window.clearTimeout(timeoutVariable)
window.clearTimeout() メソッドは、windowの接頭辞を付けないで記述することができます。
clearTimeout()メソッドは、setTimeout()から返された変数を使用します：
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
関数がまだ実行されていない場合は、clearTimeout()メソッドを呼び出して実行を停止することができます：
上の例と同じですが、"Stop"ボタンが追加されています：
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
Try it Yourself »
setInterval()メソッドは、指定した時間間隔ごとに所定の関数を繰り返します。
window.setInterval(function, milliseconds);
window.setInterval() メソッドは、windowの接頭辞を付けないで記述することができます。
最初のパラメータは、実行する関数です。
2番目のパラメータは、実行と次の実行までの時間間隔の長さを表します。
次の例では、"myTimer" という関数を毎秒1回（デジタル時計のように）実行します。
現在の時刻を表示します：
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Try it Yourself »
1秒間は1000ミリ秒です。
clearInterval()メソッドは、setInterval()メソッドで指定した関数の実行を停止します。
window.clearInterval(timerVariable)
window.clearInterval() メソッドは、windowの接頭辞を付けないで記述することができます。
clearInterval()メソッドは、setInterval()から返された変数を使用します：
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
上の例と同じですが、"Stop time" ボタンを追加しました：
<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>
Try it Yourself »