Question

Is there a way to delay the calling of a JavaScript function until two criteria are met?

I have a slideUp() animation and a .get() function that start at the same time, but either one could finish first. I want a function to be called when both have completed.

Answer 1

You just have to keep track, either a counter or (my preferred approach) flags for all relevant information.

var slideDone, getDone;

$("#foo").slideUp(function() {
    slideDone = true;
    nextThing();
});
$.get({
    // ...
    success: function() {
        getDone = true;
        nextThing();
    }
});

function nextThing() {
    if (slideDone && getDone) {
        // Do the next thing
    }
}

Now, obviously my two conditions above are very artificial, but I find that most of the time when this comes up in my real work, I have actual information I can use for the check and so don’t resort to artificial conditions.

Or a counter:

var counter = 0;

++counter;
$("#foo").slideUp(function() {
    nextThing();
});
++counter;
$.get({
    // ...
    success: function() {
        nextThing();
    }
});

function nextThing() {
    if (--counter === 0) {
        // Do the next thing
    }
}

To someone used to multi-threaded programming, that looks like a race condition (what if the slideUp completes before we start the get?), but it’s not one in JavaScript on browsers, which is single-threaded (barring the use of web workers, which use a syntax that wouldn’t apply to the above anyway).

If you find this coming up a lot, you could of course always isolate the logic (not that there’s a lot of it, but…) into an object and reuse it.