JavaScript の setTimeout と setTimeinterval の使用例の説明

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに独自のアプリケーション シナリオがあります。

実際、setTimeout と setInterval の構文は同じです。これらにはすべて 2 つのパラメーターがあり、1 つは実行されるコード文字列、もう 1 つはコードが実行されるまでのミリ秒単位の時間間隔です。

ただし、これら 2 つの関数には違いがあります。setInterval はコードを 1 回実行した後、一定の時間間隔で自動的にコードを繰り返しますが、setTimeout はコードを 1 回だけ実行します。

setTimeout はオン/オフ アクションにのみ適用できるようですが、関数ループを作成して setTimeout を繰り返し呼び出し、繰り返し操作を実現できます。

ショータイム();
関数 showTime()
{
    var today = 新しい Date();
    alert("時刻は: " + today.toString());
    タイムアウトを設定します("showTime()", 5000);
}

この機能を使用すると、5秒ごとに時間が表示されます。 setInterval を使用する場合、対応するコードは次のようになります。

設定間隔("showTime()", 5000);
関数 showTime()
{
    var today = 新しい Date();
    alert("時刻は: " + today.toString());
}

これら 2 つのメソッドは非常によく似ており、同様の結果を表示しますが、2 つのメソッドの最大の違いは、setTimeout メソッドが 5 秒ごとに showTime 関数を実行しないことです。setTimeout を呼び出すたびに、5 秒ごとに showTime 関数が実行されます。つまり、showTime 関数のメイン部分の実行に 2 秒かかる場合、関数全体は 7 秒ごとに実行されます。ただし、setInterval は呼び出す関数にバインドされず、単に一定の間隔で関数を繰り返すだけです。

一定の時間間隔で正確にアクションを実行する必要がある場合は、setInterval を使用するのが最適です。連続呼び出しによって相互に干渉したくない場合は、特に各関数呼び出しで大量の計算と長い処理時間が必要な場合、setTimeout を使用するのが最適です。

関数ポインタの使用

2 つのタイミング関数の最初のパラメータはコードの文字列です。実際には、このパラメータは関数ポインターにすることもできますが、Mac の IE 5 ではこれがサポートされていません。

setTimeout 関数と setInterval 関数の 2 番目のパラメータとして関数ポインタを使用すると、他の場所で定義された関数を実行できます。

タイムアウトを設定します(showTime、500)。
関数 showTime()
{
    var today = 新しい Date();
    alert("時刻は: " + today.toString());
}

さらに、匿名関数をインライン関数として宣言することもできます。

setTimeout(function(){var today = new Date();
alert("時刻は: " + today.toString());}, 500);

話し合う

タイミング関数が処理されない場合、setInterval はブラウザ ウィンドウが閉じられるか、ユーザーが別のページに移動するまで同じコードを実行し続けます。ただし、setTimeout 関数と setInterval 関数の実行を終了する方法はまだあります。

setInterval 呼び出しが完了すると、タイマー ID が返されます。この ID は、将来タイマーにアクセスするために使用できます。この ID が clearInterval に渡されると、呼び出されたプロセス コードの実行を終了できます。具体的な実装は次のとおりです。

var intervalProcess = setInterval("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
stopGoalLink を添付して、"クリック"、stopGoal を false に設定します。
関数 stopGoal()
{
    間隔をクリアします(間隔プロセス);
}

stopGoalLink がクリックされている限り、いつクリックされたかに関係なく、intervalProcess はキャンセルされ、今後 intervalProcess が繰り返し実行されることはありません。 setTimeout がタイムアウト期間内にキャンセルされた場合、この終了効果は次のように setTimeout でも実現できます。

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
stopGoalLink を添付して、"クリック"、stopGoal を false に設定します。
関数stopGoal() {
   タイムアウトをクリアします(タイムアウトプロセス)。
}

これで、JavaScript の setTimeout と setTimeinterval の詳細な使用例に関するこの記事は終了です。js setTimeout と setTimeinterval の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript によるデータ視覚化: ECharts マップの作成
  • 非常に詳細な基本的なJavaScript構文ルール
  • JavaScript における型の必須および暗黙的な変換の詳細な説明
  • JavaScriptはスライダーを介してWebページの色を変更することを実装します
  • JavaScript es6 における var、let、const の違いの詳細な説明
  • JavaScript における this ポイントの問題の詳細な説明
  • JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ
  • JavaScript における Arguments オブジェクトの使用に関する詳細な説明
  • JavaScript CollectGarbage 関数の例
  • JavaScript における BOM と DOM の詳細な説明
  • 期間限定フラッシュセール機能を実現するJavaScriptタイマー
  • 期間限定フラッシュセール機能を実装するJavaScript
  • JavaScript オブジェクト (詳細)

<<:  MySQL トランザクション、分離レベル、ロックの使用例の分析

>>:  Ubuntu 19.10 で ssh サービスを有効にする (詳細なプロセス)

推薦する

CentOS 7にDockerをインストールする

Linuxシステムをお持ちでない場合は、ダウンロードとインストールについてはhttps://www....

CentOS での MySQL ログイン 1045 問題を解決する

アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...

スクロールバーの美化効果を実現するための CSS3 のサンプル コード

具体的なコードは次のとおりです。 /*スクロールバーの幅*/ ::-webkit-スクロールバー{ ...

テキストの折り畳み特殊効果を実現する HTML+CSS の例

この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...

Office ファイルのオンライン プレビュー用の Vue サンプル コード

最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

セマンティック XHTML タグの紹介

まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコン​​テンツの意味を判断できるが、検索エ...

Vue3 コンパイルプロセス - ソースコード分析

序文: Vue3 がリリースされてからかなり経ちますが、最近、会社のプロジェクトでVue3 + Ty...

Centos8 で yum を使用して rabbitmq をインストールするチュートリアル

/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...

tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + borde...

MySQL データのバックアップと復元のサンプル コード

1. データのバックアップ1. mysqldumpコマンドを使用してバックアップするmysqldum...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

Vue ルーティング this.route.push ジャンプ ページが更新されない場合の解決策

Vue ルーティング this.route.push ジャンプ ページが更新されない1. 背景概要:...