javascript - jQuery fadeIn 在其回调中运行两次

Question

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

上面的代码将打印“1”和“2”，因为 jQuery fadeIn 隐含在两个不同的 DOM 对象上。有没有办法让它只运行一次而不破坏这段代码？

Answer 1

一个简单的解决方案：

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

最干净的解决方案是使用jQuery 的承诺系统：

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

示范

Answer 2

您明确告诉它运行两次，因为您已经定义了两个项目的选择器。如果您希望它运行一次，请让它在一项上运行：

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);
    } );   
})

所以你的回调将为每个元素触发

Answer 5

在 jQuery 1.6 中使用新的.promise()，它是为了解决多个回调问题，像这样使用它：

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