jquery - 执行功能不超过一次

Question

我编写了如下所示的代码来调用灯箱显示并回调一些函数，例如function_a，但它会触发16次。

我怎样才能让它只火一次？

$("#open").click(function(){
    $('.a, .b, .c, .d').fadeOut(600,function(){
        $('.e, .f, .g, .h').fadeIn(400,function(){
            function_a();
        });
    });
});

function_a(){
    console.log('fire')
};

Answer 1

您可以使用$.fn.promise，f.ex：

$("#open").click(function(){
    $('.a, .b, .c, .d').fadeOut(600).promise().done(function(){
        $('.e, .f, .g, .h').fadeIn(400).promise().done(function(){
            function_a();
        });
    });
});

从文档：

.promise() 方法返回一个动态生成的 Promise，一旦绑定到集合的特定类型的所有操作（无论是否排队）都结束，该 Promise 就会被解析。

另请注意，classNames 的长度必须至少为 2 个字符。

Answer 2

这是因为您可能有 16 个元素，其中具有指定的类
有一个变量来跟踪它

$("#open").click(function(){
    var iCount=0;
    $('.a, .b, .c, .d').fadeOut(600,function(){
        $('.e, .f, .g, .h').fadeIn(400,function(){
            if(iCount==0)
               function_a();
            iCount++;
        });
    });
});

Answer 3

尝试这个：

var fired = 0; 
$("#open").click(function(){
    $('.a, .b, .c, .d').fadeOut(600,function(){
        $('.e, .f, .g, .h').fadeIn(400,function(){
            if (fired < 1) function_a();
            fired ++;
        });
    });
});

function_a(){
    console.log('fire')
};