実例解説JavaScriptタイムイベント

JavaScriptタイミングイベント
JavaScriptを使うことにより、関数が呼び出された直後にコードを実行する代わりに、設定された時間間隔の後にコードを実行する能力があります。私たちは時間貸し事件と呼びます。
JavaScritpでは、タイミングイベントを使用することが容易であり、二つの鍵となる方法は：

set Interval()-間隔で指定されたミリ秒数は、指定されたコードを継続的に実行します。

setTimeout()-指定したミリ秒数後に指定コードを実行します。

注意：set Interval()とsetTimeout()はHTML DOM Windowオブジェクトの2つの方法です。
set Interval()方法
set Interval()間隔で指定されたミリ秒数で指定されたコードを継続的に実行します。
構文
window.set Interval（javascript function）；
window.set Interval()メソッドはwindowプレフィックスを使わずに直接関数set Intervalを使用することができます。
set Interval()の最初のパラメータは関数です。
2番目のパラメータ間隔のミリ秒数
1000ミリ秒は一秒です。

setInterval(function(){alert("Hello")},3000);

効果は以下の通りです

実例は、どのようにsetInterval（）方法を使用するかを示しているが、3秒ごとに1回のポップアップがユーザ体験に良くない。
以下の例は現在の時刻を表示します。set Interval()メソッド設定は秒ごとにコードを実行します。腕時計と同じです。

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

効果は以下の通りです

どのように実行を停止しますか
clear Interval（）方法は、set Interval（）方法の実行を停止する関数コードである。
構文
window.clear Interval(intervalVarable)
window.clear Interval（）方法はwindowプレフィックスを使わずに直接関数clear Intervalを使用することができます。
clear Interval()を使用するには、時間計測方法を作成する際にグローバル変数を使用しなければなりません。
myVar=set Interval（javascript function）；
その後、clear Intervalを使って実行を停止してもいいです。
以下の例では、停止ボタンを追加しました。

<p id="demo"></p>
<button onclick="myStopFunction()">  </button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
  var d=new Date();
  var t=d.toLocaleTimeString();
  document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
  clearInterval(myVar);
}
</script>

効果は以下の通りです

set Timeout()方法
構文
myVar=window.setTimeout(javascript function)；
set Timeout()メソッドは、ある値を返します。上記のステートメントでは、値はmyVarという変数に格納されます。このsetTimeoutをキャンセルしたい場合は、この変数を使って名来で指定できます。
set Timeout()の最初のパラメータはJavaScript文を含む文字列である。この文は「alert('5 seconds！')」のようなものがあります。あるいは関数の呼び出し、例えばalertMsg。
第二のパラメータは、現在から何ミリ秒後に第一のパラメータを実行するかを示します。
ヒント：1000ミリ秒は一秒に等しい。
実例
3秒待って、「ハロー」を弾いてください。

setTimeout(function(){alert("Hello")},3000);

効果は以下の通りです

どのように実行を停止しますか
clearTimeout（）方法は、setTimeout（）方法の関数コードの実行を停止するために使用される。
構文
window.clearTimeout(timeoutVarable)
window.clearTimeout（）方法はwindowプレフィックスを使用しないことができる。
clearTimeout()を使用するには、タイムアウトの作成方法でグローバル変数を使用しなければなりません。
myVar=setTimeout（javascript function）；
関数がまだ実行されていない場合は、関数コードの実行を停止するためにclearTimeout（）法を使用することができます。
実例
以下は同じ例ですが、「Stop the alert」ボタンを追加しました。

var myVar;
 
function myFunction()
{
  myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
  clearTimeout(myVar);
}

効果は以下の通りです

以上は実例でJavaScriptタイミングイベントの詳細を説明しました。JavaScriptタイミングイベントに関する資料は他の関連記事に注目してください。