Force jQuery event execution order

Question

Suppose a page has several events being associated via jQuery. For example, in a given section, I have:

$().ready(function() {
    foo();
});

And further ahead I have:

$().ready(function() {
    bar();
});

And several lines further down...

$().ready(function() {
    VoceJahEntendeuAIdeia();
});

Now suppose I wish to force the order of execution of events. Is there any way to do bar(); rotate before foo();, which does not necessarily involve changing the two positions or modifying the jQuery code?

The reason is that I’m dealing with code injected into the application through events load and ready jQuery, by components of a framework I’m using. Such a framework necessarily injects its own code last on the page load, but I really need my code to run last. And I find the use of setTimeout/setInterval inelegant.

Answer 1

If you cannot modify the code in any way, my only suggestion is to make a "Monkey patch" in function jQuery.fn.ready, to specify an execution order. Enter this code before of all others (but afterward insert script with jQuery itself, of course):

var ordem = [0,2,3,1]; // Especifica a ordem desejada
var iniciadores = []; // Acumula os iniciadores
$(document).ready(function() {
    // Executa os iniciadores na ordem
    for ( var i = 0 ; i < ordem.length ; i++ ) {
        var x = iniciadores[ordem[i]];
        x[0].apply(x[1], x[2]);
    }
    // Remove o "monkey patch"
    $.fn.ready = oldReady;
});

var oldReady = $.fn.ready; // Guarda o ready original
// Monkey patch
$.fn.ready = function(fn) {
    if ( this[0] == document ) // Se for no document...
        iniciadores.push([fn, this, arguments]); // não execute, acumule
    else
        return oldReady.apply(this, arguments); // Senão execute
}

Example in jsFiddle.

Answer 2

There really isn’t a way to do this, but if it helps, you can delegate a load event to run your script. So it will only run when all page components, including the last one, are loaded.

Answer 3

A simple but not very elegant way:

$('#teste').on('click',     function(e){ console.log( 1, e.type ); }); // 3
$('#teste').on('mousedown', function(e){ console.log( 2, e.type ); }); // 1
$('#teste').on('mouseup',   function(e){ console.log( 3, e.type ); }); // 2
$('#teste').on('click',     function(e){ console.log( 4, e.type ); }); // 4

// Alterando a ordem

// Salva eventos originais de click
var eventosOriginais = jQuery.extend( true, {}, $._data($("#teste")[0], "events").click );
// Apaga os eventos
$('#teste').off('click')
// readiciona os eventos na ordem desejada
$('#teste').on('click', function(e){ 
    eventosOriginais[1].handler(e);
    eventosOriginais[0].handler(e);
})

with some work, you automate the re-bind of events, for the way you want

functional example in jsfiddle

Another option, just to solve your problem is to look for some other event that is usually triggered before, as in the example, mousedown and mouseup happen before the click