jQuery mehrere Dokument bereit Warteschlange Auftrag

Question

Ich weiß Aufrufe an $ (Funktion() {}) in jQuery werden in der Reihenfolge ausgeführt, die sie definiert sind, aber ich frage mich, ob Sie die Reihenfolge der Warteschlange steuern können?

Zum Beispiel ist es möglich, „Hallo Welt 2“ vor „Hallo Welt 1“ zu nennen:

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

Die Frage ist, ob es möglich ist ... Ich weiß schon, geht es gegen Best-Practice ;)

Answer 1

Diese Funktionen werden zu einem privaten Array hinzugefügt readyList, also würde ich sagen, dass es für die Manipulation nicht zugänglich ist.

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

Answer 2

Es kann getan werden, aber nicht leicht. Sie müssten jQuery selbst hacken, wahrscheinlich here. Bevor jQuery diese Funktionen in der Schleife while aufruft, müssen Sie Code hinzufügen, um das Array readyList zu überprüfen und die Elemente nach Ihren Wünschen neu zu ordnen.

Answer 3

hier, wie Sie tun es gehen würde:

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

Sie können mehr lesen über sie here

Answer 4

Sie jQuery Versprechen, etwas zu erreichen, nutzen können.

Es folgt ein Beispiel, in der jQuery.ready.promise Verwaltung von DOM Bereit Blöcken der Reihenfolge der Ausführung hilft:

1. Im folgende Beispiel wird der erste DOM Bereit Block versucht, die Höhe des für den Zugriff auf Test-Div, das an den Body in einem späteren DOM-Ready-Block angehängt wird. Wie in der Fiddle wird es nicht verstanden.

   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. Im folgenden Beispiel wird es zu tun genau das gleiche wie das Beispiel vor jQuery.ready.promise verwenden. Wie in der Fiddle funktioniert es wie gewünscht.

   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/