等待jQuery使用两个事件，并在两个事件完成后执行回调 [英] Wait for two events with jQuery and execute a callback when both are done

问题描述

我在一个元素上有一个.click()事件.关闭后，此暴民会发生过渡，并会进行AJAX调用.就是这样.

I have a .click() event on an element. After it's closed, this mob has a transition that happens and an AJAX call that goes through. That's all that happens.

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

What I need is a callback to put inside the .click() function to execute when both of those things are done, even if transitions aren't supported. Here's a timeline:

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

jQuery needs to wait for the ajax call and the transition, then execute the callback after the ajax call has completed AND the transition has either finished or not happened at all.

我该怎么做?谢谢！

注意:我正在使用$.ajax()进行ajax调用，并在有问题的元素上进行了正常的CSS3转换.我可以使用javascript事件绑定来检测transitionEnd，我为该变量设置了一个名为transitionEnd的变量，另一个变量用于检测浏览器是否支持过渡，调用了supportsTrans.

NOTE: I'm using $.ajax() for the ajax call and a normal CSS3 transition on the element in question. I can detect transitionEnd with javascript event binding, I have a variable setup for that called transitionEnd and another variable that detects if the browser support transitions call supportsTrans.

推荐答案

每个事件都有一个标志，最初为false.钩住有问题的两个事件(transitionEnd和ajax success，听起来像).每个事件都设置其标志并调用一个函数.该函数将检查标志:如果同时设置了标志，它将执行某些操作.

Have a flag for each event, initially false. Hook the two events in question (transitionEnd and the ajax success, it sounds like). Each event sets its flag and calls a function. That function checks the flags: If both are set, it does something.

这里是使用animate而不是CSS过渡的示例，只是为了使事情变得简单:在线示例 | 源

Here's an example using animate rather than a CSS transition, just to keep things simple: 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调用失败.

Note the error handling, in case the ajax call fails.

这篇关于等待jQuery使用两个事件，并在两个事件完成后执行回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！