2009-09-30 6 views
49

を働いていない私は私がのsetTimeoutで失速してしまった仕事に私のAJAXの例を得るに向かう途中で、まだjQueryのに新たなんです。私はそれをどこに追加しなければならないかに分けた」毎秒divに。jQueryの、のsetTimeoutは

関連コードは2つのファイルにあります。

index.htmlを

<html><head> 
<script type='text/javascript' src='jquery.js'></script> 
<script type='text/javascript' src='myCode.js'></script> 
</head> 
<body> 
<div id='board'>Text</div> 
</body> 
</html> 

myCode.js

(function(){ 
    $(document).ready(function() {update();}); 

    function update() { 
     $("#board").append("."); 
     setTimeout('update()', 1000);  } 
})(); 

myCode.jsファイルは大丈夫と作品 "アップデート()" を通じて、決して再び第1の時間を実行します。

答えて

110

ここではいくつかの問題があります。

まず、コードをanonymous functionに定義しています。この構成体は:

(function() { 
    ... 
)(); 

の2つのことを行います。それは無名関数を定義し、それを呼び出します。これを行う範囲の理由がありますが、私はそれがあなたが実際に望むものであるかどうかはわかりません。

あなたはsetTimeout()にコードブロックに渡しています。問題は、そのような場合にupdate()がスコープ内にないことです。

(function() { 
    $(document).ready(function() {update();}); 

    function update() { 
    $("#board").append("."); 
    setTimeout(update, 1000);  } 
    } 
)(); 

を関数ポインタupdateは、そのブロックの範囲内であるので、この作品ように、しかしそれはあなたの代わりに関数ポインタを渡した場合。

$(document).ready(function() {update();}); 

function update() { 
    $("#board").append("."); 
    setTimeout(update, 1000);  } 
} 

または

$(document).ready(function() {update();}); 

function update() { 
    $("#board").append("."); 
    setTimeout('update()', 1000);  } 
} 

及びこれらの作業の両方:私が言ったように

しかし、あなたはこのようにそれを書き換えることができるように無名関数は必要ありません。 2番目のコードは、コードブロック内のupdate()が現在スコープ内にあるため動作します。

私はまた、あなただけの代わりにsetInterval()を使用することができます$(function() { ... }短縮ブロック形態というよりupdate()setTimeout()を呼び出しを好む:それをクリア

$(function() { 
    setInterval(update, 1000); 
}); 

function update() { 
    $("#board").append("."); 
} 

希望を。

+0

ありがとうございました。誰もそれがそれのように動作しない理由を説明することはできますか?私が見たすべての例は、私が使用した書式設定に似ています。 –

+0

は本当にこれを参照するのに最適なリソースですか?彼は例としてそのページを使用した場合、同じミスを犯していました。この場合、 –

+3

w3schoolsが正しいです。この問題は範囲の問題でした。 – cletus

19
setInterval(function() { 
    $('#board').append('.'); 
}, 1000); 

clearIntervalは、一度に停止したい場合に使用できます。

+1

私はsetInvervalを使用していませんが、私の目標を達成するためのより直接的なルートと思われます。ありがとう –

+0

cletusが彼の解決策にそれを加えたようです。重要なことは、評価される文字列ではなく、setInterval/setTimeoutに実際の関数を与えるべきことです。例えば、 'update()' –

+2

'update()'のようなコードブロックを渡すことは有効ですが優先されません。すべてのユーザーの情報について – cletus

8

のSetTimeoutは、その指定した時間間隔であなたの関数たびに呼び出すためのsetIntervalを使用して、より良いあなたの要件のためになるよう指定された期間の後に実行するコードのあなたのセットを作るために使用されます。

+3

setTimoutはより良い方法です。関数update()の実行に1秒以上かかる場合、同じ関数が複数実行される可能性があります時間。 setTimeoutを使用すると、関数update()は次の時間ループが発生する前に完全に終了する必要があるため、一度に1つのインスタンスしか実行されません。 – kamui

0

これは、同じことを達成したがはるかに簡単です:

$(document).ready(function() { 
    $("#board").delay(1000).append("."); 
}); 

あなたは、ほぼすべてのjQueryのメソッドの前に遅延をチェーンすることができます。