JavaScriptタイマーの詳細な説明

JavaScriptタイマーの詳細な説明

簡単な紹介

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

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

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

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

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

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

間隔の設定

説明する

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

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

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

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

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

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

パラメータ

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

パラメーター 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()のパラメータと同じです。

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

パラメーター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 のその他のコンテンツにも注目していただければ幸いです。

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

<<:  CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法

>>:  HTMLを圧縮しない理由はいくつかある

推薦する

非常に実用的なMySQL関数の包括的な概要、詳細な例の分析チュートリアル

目次1. MySQLの関数の説明2. 単行関数の分類3. キャラクター機能4. 数学関数5. 日付と...

選択タグ内のオプションをクリアする3つの方法

方法1コードをコピーコードは次のとおりです。 document.getElementById(&qu...

MYSQL インストールの解凍バージョンと発生したエラーと解決策

1 インストールMYSQL 公式サイトから対応する解凍バージョンをダウンロードし、必要なディレクトリ...

クロスオリジン画像リソース権限(CORS 対応画像)

HTML 仕様書では、画像の crossorigin 属性が導入されています。適切なヘッダー情報 ...

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...

フックを使用して React コンポーネントを書くときに注意すべき 5 つの点

目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...

特殊効果メッセージボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装された特殊効果メッセージ ボックスを紹介します。効果は次のとお...

Linux で iostat コマンドを使用するチュートリアル

序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...

Alibaba Cloud ECSインスタンスのユーザールートパスワードとリモート接続方法を設定する方法

Alibaba Cloud サーバーを購入した後、新しいインスタンスが正常に動作できるようにするには...

Linux に ASPNET.Core3.0 ランタイムをインストールするためのサンプル コード

# 以下の例は x64 ビット ランタイム v3.0.0 用です mkdir /runtimes ...

フロントエンドセキュリティの詳細な説明: JavaScript の http ハイジャック対策と XSS

目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...

Linux のバックグラウンドで & と nohup を使用する方法

ターミナルやコンソールで作業しているときは、メールを読むなど、もっと重要な作業があるかもしれないので...

Centos8 の Django プロジェクトに nginx+uwsgi をデプロイするチュートリアル

1. 仮想環境virtualenvのインストール1. virtualenvをインストールするpip3...