jQueryで2つのイベントを待って、両方が完了したらコールバックを実行します。

Question

要素に.click()イベントがあります。閉鎖された後、この暴動が起こり、AJAXコールが進行します。それはすべて起こります。

トランジションがサポートされていなくても、両方の処理が完了したときに.click()関数を実行するコールバックが必要です。

jQueryは、ajax呼び出しとトランジションを待つ必要があります。その後、ajax呼び出しが完了してトランジションが完了したか、まったく実行されなかった後にコールバックを実行する必要があります。

どうすればいいですか？ありがとう！

注：私は$.ajax()をajax呼び出しに使用しており、問題の要素では通常のCSS3遷移を使用しています。私はjavascriptイベントバインディングでtransitionEndを検出できます。私は、transitionEndと呼ばれる変数の設定と、ブラウザのサポートトランジションがsupportsTransを呼び出すかどうかを検出する別の変数を持っています。

Answer 1

イベントごとにフラグを設定します。最初はfalseです。問題の2つのイベントをフックしてください（transitionEndとajax successのように聞こえます）。各イベントはフラグを設定し、関数を呼び出します。その関数はフラグをチェックします：もし両方がセットされていれば、何かします。

ここでは、CSSを移行するのではなく、animateを使用して、単純なものにする例を示します。Live example | source

jQuery(function($) { 

    $("#theButton").click(function() { 
    this.style.display = "none"; 
    $("#box, #content").show(); 
    doTheStuff(); 
    }); 

    function doTheStuff() { 
    var ajaxDone = false, 
     ajaxFailed = false, 
     animationDone = false; 

    display("Triggering ajax and animation"); 

    $.ajax({ 
     url: "http://jsbin.com/ibebiv", 
     method: "GET", 
     success: function(data) { 
     $("#content").append(data); 
     display("ajax done"); 
     ajaxDone = true; 
     checkDone(); 
     }, 
     error: function() { 
     ajaxFailed = true; 
     checkDone(); 
     } 
    }); 

    $("#box").animate({ 
     left: "+200px" 
    }, function() { 
     display("animation done"); 
     animationDone = true; 
     checkDone(); 
    }); 

    function checkDone() { 
     if ((ajaxDone || ajaxFailed) && animationFlag) { 
     display("<strong>All done</strong>"); 
     } 
    } 
    } 

    function display(msg) { 
    $("<p>").html(msg).appendTo("#content"); 
    } 
}); 

ajax呼び出しが失敗した場合のエラー処理に注意してください。