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's promise system：

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

demonstration

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

jQuery fadeIn在其回调中运行两次

5 个答案: