jquery event to execute only when a particular event has finished

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

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

I'm trying to make $(this).animate({}); execute after call开发者_如何学编程AnotherFunction(); 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!

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.

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