Jquery_jquery での setInterval と setTimeout の使用方法

WBOY
リリース: 2016-05-16 17:38:05
オリジナル
1075 人が閲覧しました

方法 1. jQuery 拡張機能を適用すると、この問題を解決できます。

コードをコピー コードは次のとおりです。

$(document ).ready (function(){
$.extend({
show:function(){
alert("ready");
}
});
setInterval( "show( )",3000);
});


方法 2. スケジュール実行する関数を指定する場合は、引用符と括弧を使用しないでください。

コードをコピー コードは次のとおりです。

$(function (){
function show(){
alert("ready");
}
setInterval(show,3000);// 関数名には引用符と括弧が含まれていないことに注意してください。 🎜>// setInterval( "show()",3000) を使用すると、「オブジェクトの欠落」が報告されます
});

違い:

setTimeout()

式または関数をロードしてから指定した時間を遅らせます。

window.clearTimeout と併用して 1 回だけ実行します。

setInterval()

実行時は、ページの読み込み後に指定された間隔で式または関数を実行します (関数は window.clearInterval と併用されます)。

追加手順:

どちらのメソッドも、一定期間後に JavaScript を実行するために使用できます。ただし、どちらにも独自のアプリケーション シナリオがあります。

メソッド

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

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


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


コードをコピー

コードは次のとおりです:showTime();function showTime ()
{
var today = new Date();
alert("時刻は次のとおりです: " today.toString ());
setTimeout("showTime()", 5000);
}



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

コードをコピーします

コードは次のとおりです:setInterval ("showTime()", 5000) );function showTime()
{
var today = new Date();
alert("時刻は次のとおりです: " today.toString ());
}



これら 2 つのメソッドは非常によく似ており、表示される結果も非常に似ていますが、この 2 つの最大の違いは、setTimeout メソッドが 5 秒ごとに showTime 関数を実行するのではなく、showTime 関数を実行するたびに実行することです。 setTimeout を呼び出してから 5 秒後の関数。これは、showTime 関数の主要部分の実行に 2 秒かかる場合、関数全体は 7 秒ごとにのみ実行されることを意味します。 ただし、setInterval は呼び出す関数によって制限されず、単にその関数を特定の時間に繰り返し実行します。
一定時間ごとにアクションを正確に実行する必要がある場合、連続呼び出しによる相互干渉を避けたい場合、特に各関数呼び出しに重い計算が必要な場合は、setInterval を使用するのが最適です。処理時間が長い場合は、setTimeout を使用することをお勧めします。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート