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

Question

我有一个.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("<strong>All done</strong>");
      }
    }
  }

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

注意错误处理,以防ajax调用失败.