0

我有一个.click()关于元素的事件。在它关闭后，这个暴徒会发生一个转换和一个 AJAX 调用。这就是发生的一切。

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

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

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

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

4

1 回答 1

5

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

这是一个使用animateCSS 过渡而不是 CSS 过渡的示例，只是为了简单起见：Live example | 资源

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 调用失败。

于 2012-05-06T08:52:01.500 回答