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, is it possible to call "Hello World 2" before "Hello World 1":

$(function(){ alert('Hello World 1') });
$(function(){ alert('Hello World 2') });

The question is whether or not it's possible... I already know it goes against best practice ;)

Fibula

Why would you define 2 different $(function() { } blocks? I'd just use 1 and put things top-down in order of execution. – Caudell

@Gregg: Consider a situation where you're using a third-party tool on your site that makes use of jQuery and document.ready. Further consider that you might want to add code to your page that relies on the third-party document.ready being run first, before yours. It's not always easy to control or predict the order of operation. – Schenck

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

Pomcroy

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

Greysun

Answer 3

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/

Raymer

Answer 4

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.

Neoclassic