jquery - 関数を 1 回だけ実行する

Question

lightbox show を呼び出して 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

これを試して：

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

Answer 3

これは、指定された要素を持つクラスに 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++;
        });
    });
});