jQuery fadeIn viene eseguito due volte nella sua richiamata

Question

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

Il codice sopra verrà stampato "1" e "2" poiché jQuery fadeIn è implicito su due diversi oggetti DOM. Esiste comunque la possibilità di eseguirlo una sola volta senza rompere questo codice?

Answer 1

Si tratta di una soluzione rapida, ma non il migliore

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

Spero che questo aiuti ... Muhammad.

Answer 2

Si dice esplicitamente di eseguire due volte perché è stato definito un selettore di due elementi. Se si desidera che venga eseguito una volta, le chiede di correre su un elemento:

jQuery("#div1") 

Answer 3

Una soluzione semplice:

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

la soluzione più pulita è quella di utilizzare jQuery's promise system:

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

demonstration

Answer 4

In termini di sequenziamento tuo codice:

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

è lo stesso di

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

SO il callback sparerà per ogni elemento

Answer 5

Utilizzare la nuova .promise() in jQuery 1.6, è stato fatto per risolvere il più callback problema, utilizzare in questo modo:

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