JavaScript の setTimeout() の使用法の概要

JavaScript の setTimeout() の使用法の概要

1. はじめに

jssetTimeoutメソッドは非常に便利で、通常はページの更新や実行の遅延などに使用されます。しかし、多くの JavaScript 初心者は、まだ setTimeout の使い方を理解していません。私は2年以上javascript学習し、応用していますが、それでも時々 setTimeoutメソッドに関する情報を調べる必要があります。今日はjsのsetTimeoutメソッドについて体系的にまとめていきます。

2. setIntervalとsetTimeoutの違い

setTimeoutについて話すとき、 setIntervalを思い浮かべるのは簡単です。なぜなら、この 2 つの使い方は似ているものの、違いがあるからです。今日はそれらを一緒にまとめてみましょう。

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

定義と使用法: setTimeout()メソッドは、指定されたミリ秒数後に関数を呼び出したり、式を評価したりするために使用されます。

構文: setTimeout(code,millisec)

パラメータ: code (必須): 関数が呼び出された後に実行されるJavaScriptコード文字列。 millisec (必須): コードを実行する前に待機するミリ秒数。

ヒント: setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用するか、コード自体で setTimeout() を再度呼び出すようにします。

間隔の設定:

setInterval()メソッドは、指定された期間 (ミリ秒単位) で関数を呼び出したり、式を評価したりします。

setInterval()メソッドは、 clearInterval()が呼び出されるかウィンドウが閉じられるまで、関数を継続的に呼び出します。 setInterval() 返ID 値はclearInterval()メソッドのパラメーターとして使用できます。

構文: setInterval(code,millisec[,"lang"])

パラメータ: code 。呼び出す関数または実行するコード文字列。 millisecが必要です。 codeの定期的な実行または呼び出し間の時間間隔(ミリ秒単位)。

戻り値: codeの定期的な実行をキャンセルするためにWindow.clearInterval()に渡すことができる値。

違い:

上記のように、 setTimeoutsetintervalの主な違いは次のとおりです。

setTimeout 1 回だけ実行されます。つまり、設定された時間が経過すると、指定されたコードの実行がトリガーされ、終了すると終了します。実行中のコードで同じsetTimeoutコマンドを再度実行すると、ループで実行される可能性があります。 (つまり、ループで実行するには、関数自体がsetTimeout()再度呼び出す必要があります)

setintervalループ内で実行されます。つまり、設定された時間間隔に達するたびに指定されたコードがトリガーされます。これは本物のタイマーです。

setinterval使い方が簡単ですが、 setTimeoutはより柔軟です。ループはいつでも終了でき、1 回目は 1 秒、2 回目は 2 秒、3 回目は 3 秒など、不規則な時間間隔で実行するように設定できます。

個人的には、setTimeout を使うことを好みます。

4. setTimeoutの使用

一緒にケースを実行してみましょう。まず、メモ帳を開いて次のコードを貼り付け、実行して効果を確認してください。

<!DOCTYPE html>
<html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
</head>
<本文>
<h1> <font color=blue> haorooms ブログのデモページ</font> </h1>
<p>3秒お待ちください!</p>

<スクリプト>
setTimeout("alert('申し訳ありません、haorooms ブログは長い間お待たせしました')", 3000 )
</スクリプト>

</本文> 
</html>


3 秒間そのままにしておくと、ページに写真フレームがポップアップ表示されます。この場合は、 setTimeoutの最も基本的な構文が適用されます。 setTimeoutは自動的に繰り返されません。

setTimeout functionを実行することもでき、繰り返し実行することもできます。

一緒に別のケースをやってみましょう:

<!DOCTYPE html>
<html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<スクリプト>
変数x = 0
関数 countSecond()
{
   x = x+1
 ドキュメント.haorooms.haoroomsinput.value=x
 setTimeout("countSecond()", 1000)
}
</スクリプト>
</head>
<html>
<本文>

<フォーム名="haorooms">
   <input type="text" name="haoroomsinput"value="0" size=4 >
</フォーム>

<スクリプト>
秒数をカウントする()
</スクリプト>

</body> </html>

inputテキスト ボックス内の数字が秒ごとに増加していることがわかります。したがって、 setTimeout Web ページで時間のジャンプも作成できます。

例がなければ、学習は速く進みません。別の例を使って、 haoroomsの特定のページでの滞在時間を計算してみましょう。

<!DOCTYPE html>
<html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">
<スクリプト>
x=0
y=-1
関数 countMin()
{y=y+1
 ドキュメントのディスプレイ最小値 ディスプレイボックス値 = y
 タイムアウトを設定します("countMin()",60000)
}
関数 countSec()
{x = x + 1
 60 パーセント
 document.displaySec.displayBox.value=z
 タイムアウトを設定します("countSec()", 1000)
}
</スクリプト> </ヘッド>
<本文>
<table> <tr valign=top> <td> haorooms ブログでの滞在時間は次のとおりです: </td>
<td> 
<フォーム名=表示最小値>
   <入力タイプ=テキスト 名前=ディスプレイボックス 値=0 サイズ=4 >
</フォーム> 
</td>
<td> ポイント</td>
<td> 
<フォーム名=ディスプレイSec> </td>
<td> <入力タイプ=テキスト 名前=ディスプレイボックス 値=0 サイズ=4 >
</フォーム>
 </td>
<td> 秒。 </td> </tr>
 </テーブル>
<スクリプト>
カウント最小値()
カウント秒数()
</スクリプト>
</本文>
</html>


いかがでしたか? 上記の例を通じて、 setTimeout()の使い方を理解していただけたと思います。

5. クリアタイムアウト()

clearTimeout( )を見てみましょう。

clearTimout() の構文は次のとおりです。

clearTimeout(timeoutID)

clearTimeout( )を使用するには、 setTimeout( )を設定するときに、このsetTimout( ) timeoutIDという名前を付ける必要があります。停止するときは、このtimeoutIDを使用して停止します。これはカスタム名ですが、多くの人がtimeoutIDという名前を付けています。

次の例では、それぞれ meter1 と meter2 という名前の 2 つのtimeoutIDが設定されています。

次のように:

timeoutID ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)

clearTimeout( )を設定する際に、 timeoutID名 meter1 と meter2 を使用することで、他の setTimeout() の動作を妨げることなく、どのsetTimeout( )が有効かを指定できます。

以下の clearTimeout() の例を参照してください。

<!DOCTYPE html>
<html>
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=UTF-8">

<スクリプト>
x = 0
y = 0
関数 count1()
{x = x + 1
 ドキュメント.display1.box1.value = x
 meter1=setTimeout("count1()", 1000)
}
関数 count2()
{y = y + 1
 ドキュメント.display2.box2.value = y
 meter2 = setTimeout("count2()", 1000)
}
</スクリプト> </ヘッド>
<本文> 
<p> </br>
<フォーム名="display1">
    <入力タイプ="テキスト" 名前="ボックス1" 値="0" サイズ=4 >
    <input type=button value="計時を停止" onClick="clearTimeout(meter1) " >
    <input type=button value="タイミングを続行" onClick="count1()" >
</フォーム>
<p>
<フォーム名="display2">
    <入力タイプ="テキスト" 名前="ボックス2" 値="0" サイズ=4 >
    <input type=button value="計時を停止" onClick="clearTimeout(meter2) " >
    <input type=button value="タイミングを続ける" onClick="count2()" >
</フォーム>

<スクリプト>
    カウント1()
    カウント2()
</スクリプト>
</本文>
</html>

6. 結論

これで、JavaScript の setTimeout() の使い方のまとめは終了です。JavaScript の setTimeout() の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript setTimeout()の基本的な使い方は何ですか?
  • JavaScript setInterval() と setTimeout() タイマー
  • JavaScript タイマー setTimeout() と setInterval() の詳細な説明
  • setTimeout() が JS でパラメータ付き関数を呼び出せない問題の解決方法
  • JS での setTimeout() の使用法を説明する例
  • js の setTimeout() と clearTimeout() の使用例の簡単な分析
  • Javascript の setTimeout() のクロージャ機能を使用する際に注意すべき問題
  • カウントダウンを例にした js setTimeout() 関数の紹介と応用

<<:  MySQL GRANT ユーザー認証の実装

>>:  なぜ Tomcat が起動できないのでしょうか?

推薦する

MySQL 整合性制約の定義と例のチュートリアル

目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...

Angularデータバインディングとその実装の詳細な説明

目次序文データバインディングとは何ですか? Angular のデータバインディングの種類一方向データ...

VueはAmapを使用して都市の位置特定を実現

この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

Linux システムでの gcc コマンドの使用法の詳細な説明

目次1. 前処理2. コンパイル3. コンパイル4. リンク1. gccのインストール(Ubuntu...

ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...

Dockerはクロスプラットフォーム機能を実現するためにnet5プログラムを導入

展開環境: ここでは docker コンテナ、Linux システム、VmWare 仮想マシンが使用さ...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

nginx と openssl で https を実装する方法

サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...

Linux における $ 記号の基本的な使い方のまとめ

Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...

WeChatミニプログラムページ間の価値転送を実装する方法の例

ミニプログラムページ間で値を渡すみなさんこんばんは。こんばんはと言うのは、これを夜に書いたからです。...

MySQL インデックスの長さ制限の原理の分析

この記事は主に、MySQL インデックスの長さ制限の原理の分析を紹介します。サンプル コードを通じて...

MySQL 圧縮版 zip のインストールに関する問題の解決策

本日、MySQLの圧縮版をインストールする際に問題が発生しました。サービスが起動できず、2、3時間苦...