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

我在元素上有一个

。click（）

事件。关闭后，这个mob会发生一个转换和一个AJAX调用。这就是所发生的一切

我需要的是一个回调函数，将其放入

。单击（）

函数中，以便在完成这两项操作时执行，即使不支持转换。这是一个时间表：

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

我该怎么做？谢谢

---

注意：我正在使用

$.ajax（）

进行ajax调用，并对相关元素进行正常的CSS3转换。我可以通过javascript事件绑定检测transitionEnd，我有一个名为transitionEnd的变量设置，另一个变量检测浏览器是否支持转换调用supportsTrans。

每个事件都有一个标志，最初为false。钩住两个有问题的事件（

transitionEnd

和ajax

success

，听起来很像）。每个事件设置其标志并调用一个函数。该函数检查标志：如果两个标志都设置了，它将执行某些操作

下面是一个使用

animate

而不是CSS转换的示例，只是为了简单起见：

jQuery（函数（$）{
$（“#按钮”）。单击（函数（）{
this.style.display=“无”；
$（“#框，#内容”）.show（）；
doTheStuff（）；
});
函数doTheStuff（）{
var ajaxDone=false，
ajaxFailed=false，
animationDone=false；
显示（“触发ajax和动画”）；
$.ajax({
url:“http://jsbin.com/ibebiv",
方法：“获取”，
成功：功能（数据）{
$（“#内容”）。追加（数据）；
显示（“ajax完成”）；
ajaxDone=true；
checkDone（）；
},
错误：函数（）{
ajaxFailed=true；
checkDone（）；
}
});
$（“#框”）。设置动画({
左：“+200px”
}，函数（）{
显示（“动画完成”）；
animationDone=true；
checkDone（）；
});
函数checkDone（）{
如果（（ajaxDone | | ajaxFailed）&&animationFlag）{
显示（“全部完成””；
}
}
}
功能显示（msg）{
$（“”）html（msg）.appendTo（“#content”）；
}
});

---

注意错误处理，以防ajax调用失败。

为每个事件设置一个标志，最初为false。钩住两个有问题的事件（

transitionEnd

和ajax

success

，听起来很像）。每个事件设置其标志并调用一个函数。该函数检查标志：如果两个标志都设置了，它将执行某些操作

下面是一个使用

animate

而不是CSS转换的示例，只是为了简单起见：

jQuery（函数（$）{
$（“#按钮”）。单击（函数（）{
this.style.display=“无”；
$（“#框，#内容”）.show（）；
doTheStuff（）；
});
函数doTheStuff（）{
var ajaxDone=false，
ajaxFailed=false，
animationDone=false；
显示（“触发ajax和动画”）；
$.ajax({
url:“http://jsbin.com/ibebiv",
方法：“获取”，
成功：功能（数据）{
$（“#内容”）。追加（数据）；
显示（“ajax完成”）；
ajaxDone=true；
checkDone（）；
},
错误：函数（）{
ajaxFailed=true；
checkDone（）；
}
});
$（“#框”）。设置动画({
左：“+200px”
}，函数（）{
显示（“动画完成”）；
animationDone=true；
checkDone（）；
});
函数checkDone（）{
如果（（ajaxDone | | ajaxFailed）&&animationFlag）{
显示（“全部完成””；
}
}
}
功能显示（msg）{
$（“”）html（msg）.appendTo（“#content”）；
}
});

---

请注意错误处理，以防ajax调用失败。

（忽略重复的问题，我选择了错误的问题。不过，我以前在这个问题上至少看到过一些变化。）不，因为我的问题涉及transitionEnd事件，使问题变得更复杂。@Jackson：是的，我选择了错误的问题并编辑了评论。然而，归根结底，这归结为：我如何等到两件事发生？我以前肯定见过这个问题，答案很简单。我知道答案已经完成并检查过了，但是延迟怎么样：？我会使用jQuery的延迟对象，它在这里得到了回答：（忽略重复的问题，我选择了错误的问题。不过，我以前在这个问题上至少见过一些变体。）不，因为我的问题涉及到transitionEnd事件，这使它变得有点复杂。@Jackson:是的，我选择了错误的问题并编辑了评论。然而，归根结底，这归结为：我如何等到两件事发生？我以前肯定见过这个问题，答案很简单。我知道答案已经完成并检查过了，但是延迟怎么样：？我会使用jQuery的延迟对象，这里回答了这个问题：通过标志，我猜他只是指一个变量。例如：flag++；在每个事件的回调中，然后调用函数本身。如果（flag==2）为true，则表示两个事件都已发生。@JacksonGariety:“如何设置标志？”

var flag=false然后稍后
flag=true如何让它进入checkDone（）以不断检查，直到它消失？现在，当ajax调用完成时，它只会检查一次。没关系，我已经知道了。它检查了两次。一次在转换结束时，一次在ajax结束时。因此，最后一个将始终具有回调！天才@JacksonGariety:：-）我刚刚更新了示例，使其全部包含在一个函数中，这更为现实，而不是全部包含在
ready
处理程序中（我认为它也是一个函数，但是…）。我想他指的是一个变量。例如：flag++；在每个事件的回拨中，然后调用t
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");
  }
});