Question

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.

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 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.

How can I do this? Thanks!

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.

Answer 1

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.

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");
  }
});

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