2010-08-13 21 views
8

Sé que las llamadas a $ (función() {}) en jQuery se ejecutan en el orden en que están definidas, pero me pregunto si puede controlar el orden de la cola.jQuery orden de cola de múltiples documentos listos

Por ejemplo, es posible llamar "Hello World 2" antes de "Hello World 1":

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

La pregunta es si es o no es posible ... ya sé que va en contra de las mejores prácticas ;)

+0

Por qué definiría 2 $ diferente (function() {} bloques que acababa de utilizar y poner las cosas 1 de arriba hacia abajo en el orden de ejecución – Gregg

+0

@. Gregg: Considere una situación en la que esté usando una herramienta de terceros en su sitio que utilice jQuery y document.ready. Además, considere que es posible que desee agregar código a su página que dependa del documento de un tercero. se ejecuta primero, antes que el tuyo. No siempre es fácil controlar o predecir el orden de la operación. – Mir

Respuesta

1

Se puede hacer, pero no es fácil. Tendría que hackear jQuery, probablemente here. Antes de que jQuery comience a llamar a estas funciones dentro del bucle while, deberá agregar código para inspeccionar la matriz readyList y volver a ordenar los elementos de acuerdo con sus preferencias.

7

aquí es cómo se van haciendo sobre él:

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

Puede leer mas sobre esto here

2

Usted puede usar jQuery promesa de lograr algo como esto.

A continuación se presenta un ejemplo en el jQuery.ready.promise ayuda a gestionar el orden de ejecución de DOM Ready bloques:

  1. En el siguiente ejemplo, el primer bloque DOM Ready está intentando tener acceso a la altura de la test div que se adjunta al cuerpo en un bloque DOM Ready posterior. Como en el Fiddle, no lo consigue.

    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>'); 
    }); 
    

    violín: http://jsfiddle.net/geektantra/qSHec/

  2. En el siguiente ejemplo, se está haciendo exactamente lo mismo que el ejemplo antes de usar jQuery.ready.promise. Como en el Fiddle, funciona como se requiere.

    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>'); 
    }); 
    

    violín:? http://jsfiddle.net/geektantra/48bRT/

Cuestiones relacionadas