jQuery fadeIn chạy hai lần trong lời gọi lại

Question

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

Đoạn mã trên sẽ in "1" và "2" vì jQuery fadeIn được ngụ ý trên hai đối tượng DOM khác nhau. Có cách nào để nó chỉ chạy một lần mà không vi phạm mã này?

Answer 1

Đó là một giải pháp nhanh chóng nhưng không phải là tốt nhất

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

Hope this helps ... Muhammad.

Answer 2

Bạn đang rõ ràng bảo nó chạy hai lần vì bạn đã xác định bộ chọn của hai mục. Nếu bạn muốn nó chạy một lần, hỏi nó để chạy trên một mục:

jQuery("#div1") 

Answer 3

Một giải pháp đơn giản:

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

Giải pháp sạch nhất là sử dụng jQuery's promise system:

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

demonstration

Answer 4

Xét về trình tự mã của bạn:

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

.210

là giống như

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

SO callback của bạn sẽ cháy cho mỗi phần tử

Answer 5

Sử dụng mới .promise() trong jQuery 1.6, nó đã được thực hiện để giải quyết mà nhiều callbacks vấn đề, sử dụng nó như vậy:

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