JavaScriptタイマーの詳細な説明

簡単な紹介

JavaScript には、setInterval() と setTimeout() の 2 つのタイマーがあり、それぞれにタイマーをキャンセルするメソッドがあります。

これらはすべてウィンドウ オブジェクトであり、呼び出し時にウィンドウを省略できます。これら 2 つのメソッドは JavaScript 仕様には含まれていません。

タイマーメソッド関連のメソッドは 4 つあります。

setTimeout()とsetInterval()の違いは、異なる時間に実行されることです。

注意: setTimeout() は 1 回だけ実行されますが、setInterval() は指定された間隔で定期的に実行されます。

間隔の設定

説明する

setInterval()メソッドは、指定された期間に従って関数を繰り返し呼び出したり、コード セグメントを実行したりできます。期間の単位はミリ秒です。

setInterval()メソッドがclearInterval()メソッドによって閉じられていない場合、またはページが閉じられている場合は、引き続き呼び出されます。

setInterval には複数のパラメータがあります。

まず、最初のパラメータがコード セグメントの場合、setInterval() メソッドはオプションになります。

2 番目に、最初のパラメータが関数の場合、setInterval() メソッドは複数のパラメータを持つことができます。

timerId = setInterval(func|code, delay, arg1, arg2, ...) とします。

パラメータ

パラメーター func|code は通常、関数を渡します。歴史的な理由により、コード文字列を渡すことはサポートされていますが、推奨されません。

戻り値

戻り値 timeoutID は、タイマーの番号を示す正の整数です。この値を clearTimeout() に渡すとタイマーをキャンセルできます。

使用法

これは、ボタンをクリックして 1 秒ごとに数値を増やす例です。

<p id="表示数"></p>
<button onclick="timer()">クリックすると 1 秒ごとに数字が 1 つずつ増えます</button>
 <スクリプト>
  定数 showNum = document.getElementById("showNum");
   let timerId; // タイマーID
  num = 0 とします。
   関数タイマー() {
    タイマーID = setInterval(addNum, 1000);
  }
   関数addNum() {
    showNum.innerText = `${num++}`;
  }
   // タイマーを停止するコードが書かれていません</script>

タイムアウトの設定

説明する

setTimeout()タイマー番号を表す整数を返します。これを使用して後でタイマーをキャンセルできます。

setTimeout()使用すると、一定の間隔が経過するまで関数の実行を延期できます。

timerId = setTimeout(func|code, delay, arg1, arg2, ...) とします。

パラメータ

setTimeout()のパラメータはsetInterval()のパラメータと同じです。

パラメーターfunc|code通常、関数を渡します。歴史的な理由により、コード文字列を渡すことはサポートされていますが、推奨されません。

使用法：

setTimeout()の使い方はsetInterval()と同じです。
ただし、1 回だけ実行されるsetTimeout()とは異なり、 setInterval()指定された時間に従って定期的に実行されます。

<p id="表示数"></p>
<button onclick="timer()">クリック後、1 秒待つと数字が 1 つ増えます</button>
 <スクリプト>
  定数 showNum = document.getElementById("showNum");
   タイマーIDを設定します。
  num = 0 とします。
  数値を追加します。
   関数タイマー() {
    タイマーID = setTimeout(addNum, 1000);
  }
   関数addNum() {
    showNum.innerText = `${num++}`;
  }
 </スクリプト>

タイマーをキャンセル

clearInterval() メソッドは、setInterval() によって設定されたタイマーをキャンセルします。

clearTimeout() メソッドは、setTimeout() によって設定されたタイマーをキャンセルします。

使い方は非常に簡単で、キャンセルするタイマーの識別子である timeoutID という 1 つのパラメーターのみを使用します。
この ID は、対応する setTimeout() または clearTimeout() 呼び出しによって返されます。

間隔をクリアします(間隔ID);
タイムアウトをクリアします(タイムアウトID);

meout()とsetInterval()は同じ数値プールを共有することに注意してください。技術的には、clearTimeout() と clearInterval() は互換性があります。ただし、混乱を避けるために、キャンセルタイミング機能を混在させないでください。

使い方は簡単

関数タイマー() {
  タイマーID = setTimeout(addNum, 1000);
}
 clearTimeout(timerId); // コードがこの行まで実行されると、timer によって設定されたタイマーはキャンセルされます。

コンソールでタイマーを使用する

ブラウザコンソールでタイマーを使用することもできます

console.time(タイマー名)

name という名前のタイマーを作成して開始します。

各タイマーには一意の名前を付ける必要があり、ページ上で同時に実行できるタイマーは最大 10,000 個です。

console.timeEnd(タイマー名)

console.timeEnd(name) を呼び出してタイマーを停止し、経過時間をミリ秒単位で出力します。

console.time(タイマー名);
console.timeEnd(タイマー名);

使用法

for ループを 99999 回繰り返すのにかかる時間の例。

console.time(名前);
 num; を入力します。
(インデックス = 0、インデックス < 99999、インデックス++) {
  数値++;
}
 console.timeEnd(名前);

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。