In javascript, execute a function when the first function is ready

Question

Is there any way, in javascript, to call on a other function when the first function is "ready"

something like this:

ridiculousTimeConsumingFunction().onReady( newFunction() );

To illustrate my example you can take a look her: http://web.cinaird.se/pdf/test.htm

Answer 1

If you mean by ready when DOM is ready, there is no such event, however you can use jQuery's ready handler to fire your function when DOM becomes ready.

With Javascript you could fire your function in load event too like this:

window.onload = function(){
  // your function code here
};

Or

window.onload = somefunction;

Answer 2

The concept of "ready" is not generally defined for asynchronous functions like your example. Usually this kind of thing is done through callbacks:

function asyncFunc(callback) {
  setTimeout(function() {
    doSomething();
    callback();
  }, 1000);
}

asyncFunc(function() {alert('Done!');}

Answer 3

In your sample, the "ridiculousTimeConsumingFunction" function doesn't actually take all that long to execute: it just scheduled another function to run 1 second in the future.

If you want to do something like this, I would suggest you check out jQuery UI's effects API. It allows you to "chain" animations together one after the other and should achieve the effect you're after.