Cómo controlar el orden de las funciones a las que se llama en jQuery $ (documento) .ready

Question

Necesito poder controlar el orden de los elementos que se procesan en el evento $(document).ready.
Se trata de controles múltiples, cargados desde varios archivos, todos pidiendo ser invocados en el evento ready. Todos comienzan una llamada asincrónica al servidor (AJAX). Solo después de que hayan terminado, necesito hacer un trabajo extra.

¿Cuál sería la solución elegante para esto?

Answer 1

Solicitudes asíncronas incendio en orden, pero volverá en el orden en que lo completen primero. Por lo tanto, no existe una manera segura de obligarlos a terminar al mismo tiempo; sin embargo, puede crear reglas para ejecutar código solo después de que hayan regresado ciertos grupos.

Por ejemplo, defina una función de devolución de llamada con un conjunto de reglas, y páselo a cada devolución de llamada success para todas sus solicitudes ajax.

var completedObject = {}; 

function groupSuccessCallback() { 
    // Test for any combination of requirements 
    if (completedObject.ajax1 && completedObject.ajax2) { 
    ... // Do something that only requires 1 and 2 
    } 
    if (completedObject.ajax1 && completedObject.ajax2 && completedObject.ajax3) { 
    ... // Do something that requires all 3 being done 
     // your data is available at completedObject.ajax# 
    } 

    // Or test for _all_ entries for a dynamic count 
    var allComplete = true; 
    for(var i in completedObject) { 
    if (completedObject.hasOwnProperty(i) && !completedObject[i]) { 
     allComplete = false; 
    } 
    } 

    // Do whatchya need. 
    if (allComplete) { 
    alert("bb-b-bb-b-b-b-bbb... that's all folks!"); 
    } 
} 

continuación, establezca las banderas dentro de sus funciones de éxito:

// Ajax1 
completedObject['anything'] = false; // instantiate a dynamic entry in the object or use an array if you can't use names. 
$.ajax({ 
    ..., 
    ..., 
    success: function(data) { 
    completedObject['anything'] = data || true; 
    groupSuccessCallback(); 
    } 
}); 

Answer 2

Dependiendo del resto de la página, hacer ese "trabajo adicional" en un controlador $.ajaxStop podría ser una opción más elegante.

Sin embargo, no sería apropiado si el usuario es capaz y/o es probable que active las siguientes llamadas $ .ajax() mientras que esas llamadas iniciales están en progreso. En ese caso, sus llamadas activadas manualmente pueden prolongar el evento $ .ajaxStop más allá de lo previsto.

Answer 3

Cree una variable que tenga un valor de 0. En la función de éxito de cada llamada Ajax incremente ese valor en 1 y compruebe si ese valor es igual a su número total de llamadas si ejecuta su función de compleción.

Answer 4

John Resig el orden de evaluación de función en $ (document) ready:

Cada vez que una nueva función se agrega a la cola, es solo que se añade a una matriz - a continuación, siendo metimos retroceder nuevamente cuando se ejecuta. Avíseme si esto no ocurre para usted.

$ .readyList - sólo en pre 1.4 versiones

jQuery expone una propiedad llamada $.readyList, que es una matriz para permitir la función orded manipulación, sin embargo $.readyList in no longer publicly exposed in jQuery 1.4.0

manera Hackerish

puede intentar $(window).load(function() {});, se debe ejecutar después de que se haya cargado toda la ventana (no cuando el documento esté listo, como es con $(document).ready()