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

1. はじめに

jsのsetTimeoutメソッドは非常に便利で、通常はページの更新や実行の遅延などに使用されます。しかし、多くの 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()に渡すことができる値。

違い：

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

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

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