使用jQuery等待两个事件，并在两个事件完成时执行回调

我在元素上有一个.click()事件。 关闭之后，这个暴徒会发生转换，并且会经历一次AJAX调用。 这就是发生的一切。

我需要的是一个回调，放在.click()函数内部，当这两件事都完成时执行，即使不支持转换。 这是一个时间表：

jQuery需要等待ajax调用和转换，然后在ajax调用完成后执行回调并且转换已完成或根本没有发生。

我怎样才能做到这一点？ 谢谢！

注意：我正在使用$.ajax()进行ajax调用，并对所讨论的元素进行正常的CSS3过渡。 我可以通过javascript事件绑定检测transitionEnd，我有一个名为transitionEnd的变量设置和另一个检测浏览器是否支持转换调用supportsTrans的变量。

Answer 1

每个事件都有一个标志，最初是假的。 钩住了两个有问题的事件（ transitionEnd和ajax success ，听起来像）。 每个事件都设置其标志并调用一个函数。 该函数检查标志：如果两者都设置，它会执行某些操作。

这是一个使用animate而不是CSS转换的示例，只是为了简单起见： 实例 | 资源

 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("All done"); } } } function display(msg) { $("
").html(msg).appendTo("#content"); } }); 

如果ajax调用失败，请注意error handling。