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 ?

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 ?

• javascript
• jquery

Share Improve this question Follow asked Mar 18, 2010 at 10:57 Umair JabbarUmair Jabbar 3,66655 gold badges3333 silver badges4242 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

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.

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.

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.

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 remend this when u have different $(document).ready in different big js files, but if you can refactor i sincerelly remend an optimal solution.

I called the function at the of coding like this, I wanted to clear cookie at the end of the page. I needed some cookies to display in the page. After displaying that, it clears the cookies. The function is defined in the header section.

<script>
 ClearCookies();
</script>
</body>
</html>