JavaScript タイマーの詳細

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript タイマー原理の詳細な説明
  • JavaScriptタイマーの詳細な説明
  • 期間限定フラッシュセール機能を実現するJavaScriptタイマー
  • 画像のシームレスなスクロールを実現する JavaScript タイマー
  • JavaScript タイマーの種類の概要

<<:  大きな太陽の天気アイコンを純粋な CSS で記述する方法の例

>>:  MySQLクライアントとサーバーのプロトコルの解釈

推薦する

ミニマルなウェブサイトデザインの例

Web アプリケーション クラス1. みんなのためにダウンまたは私だけのためにこのウェブサイトは、ウ...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...

MySQL はカスタムシーケンスを使用して row_number 関数を実装します (詳細な手順)

いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...

Vue+element+oss はフロントエンドのフラグメントアップロードとブレークポイント再開を実現します

純粋なフロントエンド実装:切片上傳斷點續傳。斷點續傳カットとアップロードに基づいて実装する必要があり...

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...

jQuery を使用して、iframe 下の無効なページ アンカー ポイントの問題を修正する

適用シナリオ: iframe ページにスクロール バーがなく、親ウィンドウにスクロール バーが表示さ...

React Fragment の紹介と詳しい使い方

目次序文フラグメントの動機React Fragment の紹介と使用<React.Fragme...

MySQL ロール関数の紹介

目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...

Vueプロジェクトをパッケージ化してリリースする手順

目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...

MySQL の基本クイックスタート知識のまとめ (マインドマップ付き)

目次序文1. データベースの基礎知識1. データベースとは何ですか? 2. データベースの分類3. ...

Win 8 以降での最新の MySQL バージョン 5.7.17 (64 ビット ZIP グリーン バージョン) のインストールと展開のチュートリアル

まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...

さまざまな種類のMySQLインデックス

インデックスとは何ですか?インデックスは、データベース ストレージ エンジンが指定されたデータをすば...

koa2 サービスに SSL を設定する方法

I. はじめに1: SSL証明書私のドメイン名は Tencent Cloud にあります。第 3 レ...

Reactで例外を適切にキャプチャする方法

目次序文エラー境界エラー境界を超えてトライ/キャッチwindow.onerror、エラーイベント未処...

HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...