JQuery fadeIn запускается дважды в своем обратном вызове

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

Приведенный выше код будет печатать "1" и "2", поскольку jQuery fadeIn подразумевается на двух разных объектах DOM. Есть ли способ заставить его работать только один раз, не нарушая этот код?

Ответ 1

Это быстрое решение, но не лучшее

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

Надеюсь, это поможет... Мухаммад.

Ответ 2

Простое решение:

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

Самое чистое решение - использовать систему jQuery обещать:

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

демонстрация

Ответ 3

Вы явно говорите, что он запускается дважды, потому что вы определили селектор двух элементов. Если вы хотите, чтобы он запускался один раз, попросите его запустить по одному элементу:

jQuery("#div1")

Ответ 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, ваш ответ будет срабатывать для каждого элемента

Ответ 5

Используйте новый . prom() в jQuery 1.6, было решено решить эту проблему несколько обратных вызовов, используйте его так:

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