jQuery ordre de file d'attente prêt pour plusieurs documents

Question

Je sais que les appels à $ (function() {}) dans jQuery sont exécutés dans l'ordre où ils sont définis, mais je me demande si vous pouvez contrôler l'ordre de la file d'attente?

Par exemple, est-il possible d'appeler « Bonjour tout le monde 2 » avant « Bonjour tout le monde 1 »:

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

La question est de savoir si oui ou non il est possible ... Je sais déjà va à l'encontre des meilleures pratiques ;)

Answer 1

Ces fonctions sont ajoutées à un tableau privé readyList, donc je dirais qu'il n'est pas accessible pour la manipulation.

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

Answer 2

Il peut être fait, mais pas facilement. Vous devez pirater jQuery lui-même, probablement here. Avant que jQuery commence à appeler ces fonctions dans la boucle while, vous devez ajouter du code pour inspecter le tableau readyList et réorganiser les éléments en fonction de vos préférences.

Answer 3

voici comment vous allez à le faire:

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

Vous pouvez en lire davantage here

Answer 4

Vous pouvez utiliser la promesse jQuery pour réaliser quelque chose comme ça.

Voici un exemple où jQuery.ready.promise aide la gestion de l'ordre d'exécution des DOM Ready blocs:

1. Dans l'exemple suivant, le premier bloc DOM Ready tente d'accéder à la hauteur du test div qui est ajouté au corps dans un bloc DOM Ready ultérieur. Comme dans le Fiddle, il ne parvient pas à l'obtenir.

   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. Dans l'exemple suivant, il fait exactement la même chose que l'exemple avant d'utiliser jQuery.ready.promise. Comme dans le Fiddle, cela fonctionne comme requis.

   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/