javascript - jQueryのfadeInはコールバックで2回実行されます

Question

var counter = 0;
jQuery("#div1, #div2").fadeIn('300',function(){
{
    counter++;
    console.log(counter);
}

jQueryのfadeInは2つの異なるDOMオブジェクトに含まれているため、上記のコードは「1」と「2」を出力します。このコードを壊さずに一度だけ実行させる方法はありますか？

Answer 1

簡単な解決策：

$("#div1").fadeIn(300);
$("#div2").fadeIn(300,function(){
   // do something only once
});

最もクリーンな解決策は、jQuery の promise システムを使用することです。

$.when($("#div1, #div2").fadeIn('300')).done(function(){
   // do something only once
});

デモンストレーション

Answer 2

2つのアイテムのセレクターを定義したため、2回実行するように明示的に指示しています。一度実行する場合は、次の1つのアイテムで実行するように依頼します。

jQuery("#div1")

Answer 3

それは迅速な解決策ですが、最善ではありません

var myFlag = true;
jQuery("#div1, #div2").fadeIn('300',function(){
{
    if(myFlag == true)
    {
        // write the code here
        myFlag = false;
    }
}

これが役に立てば幸いです...ムハンマド。

Answer 4

コードの順序付けに関して：

jQuery("#div1, #div2").fadeIn('300',function(){
    counter++;
    console.log(counteR);
});

と同じです

jQuery("#div1, #div2").each(function(){
   jQuery(this).fadeIn('300',function(){
        counter++;
        console.log(counteR);
    } );   
})

SO コールバックは要素ごとに発生します

Answer 5

jQuery 1.6 で新しい.promise()を使用します。複数のコールバックの問題を解決するために作成されました。次のように使用します。

var counter = 0;
jQuery("#div1, #div2").fadeIn('300').promise().done(function()
{
    counter++;
    console.log(counter);
});