2011-07-29 3 views
1

Ajax経由でコンテンツを自動的に更新するページがあります。私はこれを微妙にしたいので、自動ページを更新しているときにロード中のgifを表示したくありません。だから私は(不要なコードが簡潔のために切り取ら)なぜパラメータは常にsetInterval()の関数に送られないのですか?

function getPosts(image) 
      { 
       //loading icon while getPosts 
       if (image) 
       { 
        $("#postcontainer").bind("ajaxStart", function(){ 
         $(this).html("<center><img src='ajax-loader.gif' /></center>"); 
       }); 
       } //... ajax call, etc. don't worry about syntax errors, they aren't in real code 

私は、中央タグが廃止されましたちょうど恥知らずなショートカットを知っている私としてgetPosts機能を備えたこのような何かをしました。 そして私は、そのため私の自動呼び出しが すべての私のマニュアルリフレッシュを表示する画像をトリガしませんsetInterval(function() { getPosts(false); }, 10000); のように間隔を設定しますが、このgetPosts(true);

のようにそれを呼び出しますあなたは(おそらく)my personal siteでアクションのバグを見ることができます

問題は、setInterval関数が最新の関数呼び出しの画像boolを使用しているように見えることです。したがって、自動呼び出し中は最初は画像が表示されませんが、手動による更新をクリックすると、呼び出しごとに画像が表示されます。

これはどのように対処できますか?

このトピックを表示/投稿していただきありがとうございます。私はこの質問が他人への良い参照になることを願っています。

答えて

0

問題あなたはコンテナにあなたの「ajaxStart」ハンドラをバインドしたら、それはそのコンテナのすべてのAJAX呼び出しで実行されることである:あなたがする必要がどのような

のようなものがあります。つまり、初めてgetPosts(true)と呼ぶと、バインディングが作成されます。次回にgetPosts(false)と呼ぶと、それはifのパスにはなりませんが、バインディングはまだ存在していますので、Ajaxコールを実行するとハンドラはまだ実行されます。ハンドラには条件付きロジックがありません。 (実際には、を呼び出すたびに作成された "ajaxStart"イベントで複数のバインディングが行われると思いますが、同じHTMLを上書きすることで同じことが起こるため、おそらく目立ちません)

は、なぜこのような何かをしない:

function getPosts(image) { 
    if (image) { 
    $("#postcontainer").html("<center><img src='ajax-loader.gif' /></center>"); 
    } 

    // Actual ajax call here 
} 

setInterval(function() { getPosts(false); }, 10000); 
0

最初の手動リフレッシュ後に、ajax呼び出しが開始されたときにイメージを表示するイベントハンドラ "ajaxstart"が添付されているためです。このイベントハンドラは、image = falseを指定して関数を呼び出す場合にも使用できます。すべてのajax呼び出しでトリガーされます。

$("#postcontainer").bind("ajaxStart", function(){ 
         $(this).html("<center><img src='ajax-loader.gif' /></center>") 
      //Remove event handler 
      $(this).unbind("ajaxStart"); 
}); 
関連する問題