jquery event to execute only when a particular event has finished

Question

Hi,

$('#div1').focus(function () {
  callAnotherFunction();

  $(this).animate({});
}

I'm trying to make $(this).animate({}); execute after callAnotherFunction(); has completed. Currently, both run at the same time. I've timed to use delay(), setTimeout() to no avail too. Is there anyway this can be done?

Thanks!

Answer 1

JavaScript is single threaded, so only one expression will be executed at a time. In the example that you've given, $(this).animate({}); will not run until callAnotherFunction(); has completed.

It's possible that callAnotherFunction(); runs additional code on a timer or delay, in which case you would have to have $(this).animate({}); on a timeout with an equal or greater delay for it to execute afterwards.

Answer 2

When in doubt, pass your function as a parameter:

$('#div1').focus(function () {
    var $t = $(this);
    callAnotherFunction(function(){ $t.animate(); });
}

... with callAnotherFunction looking something like this:

function callAnotherFunction(callback){
    // do whatever you were previously doing, and then...
    callback();
}