Question

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

我需要的是一个回调，在完成这两件事之后放入.click()函数执行，即使不支持转换也是如此。这是一个时间表：

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

我该怎么做？谢谢！

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

Answer 1

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

以下是使用animate而非CSS转换的示例，只是为了简单起见：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调用失败。

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

1 个答案: