Javascript_javascript スキルでの setTimeOut および setInterval のタイマーの使用法

WBOY
リリース: 2016-05-16 15:55:31
オリジナル
1448 人が閲覧しました

JavaScript の setTimeOut 関数と setInterval 関数は、遅延タスクやスケジュールされたタスクを処理するために広く使用されています。たとえば、Web ページを一定時間開いた後にログイン ボックスが表示され、ページが非同期リクエストを送信して、最新データを定期的に取得するなどしかし、それらのアプリケーションは異なります。

setTimeout() メソッドは、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。一方、setInterval() は、clearInterval がクリアするまで、指定されたミリ秒数ごとに関数または式を呼び出すためにループします。つまり、setTimeout() は 1 回のみ実行され、setInterval() は複数回実行できます。 2 つの関数のパラメータも同じです。最初のパラメータは実行されるコードまたはハンドルで、2 番目のパラメータは遅延するミリ秒数です。
setTimeOut の使用法
setTimeout 関数の使用法は次のとおりです:

コードをコピーします コードは次のとおりです:

var timeoutID = window.setTimeout(func, [遅延, param1, param2, ...]); var timeoutID = window.setTimeout(code, [遅延]);

timeoutID: タイマー ID 番号。clearTimeout() 関数でタイマーをクリアするために使用できます。 func: 実行中の関数。

code: (代替構文) 実行されるコードの文字列。
遅延: 遅延時間 (ミリ秒単位)。指定しない場合、デフォルトは 0 になります。

window.setTimeout または setTimeout を使用できます。window.setTimeout がグローバル ウィンドウ オブジェクトのプロパティとして setTimeout 関数を参照することを除いて、2 つの書き込みメソッドは基本的に同じです。

アプリケーション例:

コードをコピーします コードは次のとおりです:
関数タイムアウト(){
Document.getElementById('res').innerHTML=Math.floor(Math.random()*100 1); }
setTimeout("タイムアウト()",5000);


コードが実行されると、5 秒後に timeout() 関数が呼び出されます。クリックするとデモが表示されます。
setInterval の使用法
setInterval 関数のパラメータと使い方は setTimeout 関数と同じです。上記の setTimeout 関数の使い方の紹介を参照してください。違いは、setInterval が func または code コードを定期的に実行することです。 応用例:




コードをコピーします

コードは次のとおりです: var tt = 10; 関数 timego(){ tt--;
Document.getElementById("tt").innerHTML = tt; If(tt==0){
window.location.href='/'; false を返します
}
}
var timer = window.setInterval("timego()",1000);


関数 timego() は、ページ要素 #tt によって表示されるコンテンツを定義します。tt が 0 の場合、ページはホームページに誘導されます。次に、タイマー timer を定義し、setInterval() を使用して 1 秒ごとに timego() を呼び出します。このようにして、timego が 10 回実行され、毎回 tt が 0 になるまで 1 ずつ減っていきます。その後、タイマーを停止したい場合は、次のコードを使用できます:




コードをコピーします

コードは次のとおりです:

実際、setTimeout() は関数を一定の間隔で繰り返し実行することもできますが、それでも単に setTimeOut と setInterval を別々に使用するだけです。さらに、JavaScript はブラウザの JavaScript エンジンでシングルスレッド方式で実行されるため、複雑なタスクを実行するためにキューに入れる必要があるため、大規模なアプリケーションではこの問題を考慮する必要があります。記事は深い調査を行っていません。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!