jQuery ordine coda pronto per più documenti

Question

So che le chiamate a $ (function() {}) in jQuery vengono eseguite nell'ordine in cui sono definite, ma mi chiedo se è possibile controllare l'ordine della coda?

Ad esempio, è possibile chiamare "Ciao Mondo 2" prima "Ciao Mondo 1":

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

La domanda è se sia o non è possibile ... so già che va contro le migliori pratiche ;)

Answer 1

Tali funzioni sono aggiunte a un array privato readyList, quindi direi che non è accessibile per la manipolazione.

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

Answer 2

Si può fare, ma non facilmente. Dovresti hackerare jQuery, probabilmente here. Prima che jQuery inizi a chiamare queste funzioni all'interno del ciclo while, dovresti aggiungere il codice per ispezionare l'array readyList e riordinare gli elementi in base alle tue preferenze.

Answer 3

ecco come si dovrebbe fare per farlo:

// 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(); 

Si può leggere di più su di esso here

Answer 4

È possibile utilizzare jQuery promessa di realizzare qualcosa di simile.

seguito è riportato un esempio in cui jQuery.ready.promise aiuta gestire l'ordine di esecuzione dei DOM blocchi predefiniti:

1. Nel seguente esempio, il primo blocco DOM pronto tenta di accedere l'altezza del test div che viene aggiunto al corpo in un successivo blocco DOM Ready. Come nel Fiddle, non riesce a capirlo.

   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. Nell'esempio seguente, si sta facendo esattamente la stessa cosa come l'esempio prima di utilizzare jQuery.ready.promise. Come nel Fiddle funziona come richiesto.

   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/