How can I call a function at the very end of document.ready

Question

I have multiple document.ready functions on a page and I want a function to be called when all my document.ready functions have been executed. I simply want the function to be called at the very end, after all other document.ready functions have executed. An example of this could be that each document.ready function increments a global variable when it has been executed, and the last function needs to check the value of that variable at the very end.

Any ideas ?

Answer 1

First idea (for small apps): Tidy up

You can just put everything in one $().ready() call. It might nieed refactoring, but it's the right thing to do in most cases.

Second idea: A Mediator [pattern]

Create a mediator class that will register functions and call its register() instead of $().ready(). When all functions are registered You just loop over the collection and run them in the single and only $().ready() and You have a point in code that is just after all is executed.

I am currently developing a kind of a framework for jquery applications that has a mediator. I might stick together a small version including the mediator if You're interested.

Answer 2

Why not just calling it after all the others ?

$(function(){
  func1();
  ...
  funcN();
  functionThatNeedsToBeCalledAfter();
});

Of course you will have to cleanup your code to have only 1 place where the document ready function is used... but then your code would be more readable so it's worth it.

Answer 3

This will be enough:

$(function () {
    window.setTimeout(function () {
        // your stuff here
    }, 0);
});

This postpones the execution of your function after all other in the document ready queue are executed.

Answer 4

little hacky but might work, create a variable inside jquery scope like that

$.imDone = false

then create a function with setTimeout called after short time to lookup for the variable ser to true

var theLastFunctionToCall = function(){
  alert('I m the last being called!')
}
var trigger = function(){
  $.imDone?theLastFunctionToCall():window.setTimeout(trigger,10);
}
trigger();

I only recommend this when u have different $(document).ready in different big js files, but if you can refactor i sincerelly recommend an optimal solution.