jQuery multiple document ready queue order

Question

I know calls to $(function(){ }) in jQuery are executed in the order that they are defined, but I\'m wondering if you can control the order of the queue?

For example

Answer 1

Those functions are added to a private array readyList, so I'd say it isn't accessible for manipulation.

http://github.com/jquery/jquery/blob/master/src/core.js#L47

Answer 2

here is how you would go about doing it:

// lower priority value means function should be called first
var method_queue = new Array();

method_queue.push({
  method : function()
  { 
    alert('Hello World 1');
  },
  priority : 2
});

method_queue.push({
  method : function()
  { 
    alert('Hello World 2');
  },
  priority : 1
});


function sort_queue(a, b)
{
  if( a.priority < b.priority ) return -1;
  else if( a.priority == b.priority ) return 0;
  else return 1;  
}

function execute_queue()
{
  method_queue.sort( sort_queue );

  for( var i in method_queue ) method_queue[i].call( null );
}

// now all you have to do is 
execute_queue();

You can read more about it here

Answer 3

It can be done, but not easily. You'd have to hack jQuery itself, probably here. Before jQuery starts calling these functions inside the while loop, you'd have to add code to inspect the readyList array and re-order the elements according to your preference.

Answer 4

You can use jQuery promise to achieve something like this.

Following is an example where jQuery.ready.promise helps managing the order of execution of DOM Ready Blocks:

1. In the following example, the first DOM Ready block is trying to access the height of the test div which is appended to the body in a later DOM Ready block. As in the Fiddle it fails to get it.

   jQuery(function () {
       var testDivHeight = jQuery("#test-div").outerHeight();
       if(testDivHeight) {
           alert("Height of test div is: "+testDivHeight);
       } else {
           alert("Sorry I cannot get the height of test div!");
       }
   });
   jQuery(function () {
       jQuery('body').append('<div style="background: #C00; height: 100px;" id="test-div"></div>');
   });
   

   Fiddle: http://jsfiddle.net/geektantra/qSHec/

2. In the following example, it is doing exactly the same as the example before using jQuery.ready.promise. As in the Fiddle it works as required.

   jQuery(function () {
       jQuery.ready.promise().done(function () {
           var testDivHeight = jQuery("#test-div").outerHeight();
           if(testDivHeight) {
               alert("Height of test div is: "+testDivHeight);
           } else {
               alert("Sorry I cannot get the height of test div!");
           }
       });
   });
   jQuery(function () {
       jQuery('body').append('<div style="background: #C00; height: 100px;" id="test-div"></div>');
   });
   

   Fiddle: http://jsfiddle.net/geektantra/48bRT/