JavaScript タイマーの詳細

1. 簡単な紹介

JavaScriptには、 setInterval()とsetTimeout() 2 つのタイマーがあり、タイマーをキャンセルするメソッドもあります。
これらはすべてwindowオブジェクトであり、呼び出し時にwindowを省略できます。これら 2 つのメソッドはJavaScript仕様には含まれていません。

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

方法	説明する
間隔の設定	定期的に関数を呼び出したり、コードの一部を実行したりします。
クリア間隔	setInterval で設定された繰り返しアクションをキャンセルします。
タイムアウトの設定	指定された遅延後に関数を呼び出すか、コードスニペットを実行します。
クリアタイムアウト	メソッドは、setTimeout() メソッドによって設定されたタイムアウトをキャンセルできます。

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

2. 間隔を設定する

2.1 説明

setInterval()メソッドは、指定された期間に従って関数を繰り返し呼び出したり、コードセグメントを実行したりできます。期間の単位はミリ秒です。
setInterval()メソッドがclearInterval()メソッドによって閉じられていない場合、またはページが閉じられている場合は、引き続き呼び出されます。
setInterval には複数のパラメータがあります。
まず、最初のパラメータがコードセグメントの場合、setInterval() メソッドはオプションになります。
2 番目に、最初のパラメータが関数の場合、setInterval() メソッドは複数のパラメータを持つことができます。

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

2.2 パラメータ

パラメータ	必須/オプション	説明する
関数 \| コード	必須	呼び出された関数の後に実行される関数またはコード文字列
遅れ	必須	コードを実行するまでの所要時間（ミリ秒単位）は空白のままにすることができます。デフォルト値は 0 です。
引数1、引数2...	オプション	実行された関数に渡されるパラメータリスト (またはコード文字列) (IE9 以前ではサポートされていません)

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

2.3 戻り値

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

2.4 使用法

これは、ボタンをクリックして 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>

3.タイムアウトを設定する

3.1 説明

setTimeout()タイマー番号を表す整数を返します。これを使用して後でタイマーをキャンセルできます。
setTimeout()使用すると、一定の間隔が経過するまで関数の実行を延期できます。

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

3.2 パラメータ

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

パラメータ	必須/オプション	説明する
関数 \| コード	必須	呼び出された関数の後に実行される関数またはコード文字列
遅れ	必須	コードを実行するまでの所要時間（ミリ秒単位）は空白のままにすることができます。デフォルト値は 0 です。
引数1、引数2...	オプション	実行された関数に渡されるパラメータリスト (またはコード文字列) (IE9 以前ではサポートされていません)

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

3.3 使用法

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++}`;
  }

</スクリプト>

4. タイマーをキャンセルする

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

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

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

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

使い方は簡単です:

関数タイマー() {
  タイマーID = setTimeout(addNum, 1000);
}

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

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

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

console.time(タイマー名)

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

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

console.timeEnd(タイマー名)

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

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

5.1 使用法

For ループを 99999 回実行するとどれくらい時間がかかるかの例:

console.time(名前);

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

console.timeEnd(名前);

JavaScript タイマーの詳細に関するこの記事はこれで終わりです。JavaScript タイマーに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: