Warum wird mein JavaScript/jQuery nicht nacheinander ausgeführt?

Question

Ich habe eine Schaltfläche mit einem Klick -Handler gebunden - was einen oder mehrere Ajax -Anrufe enthält, je nachdem, wie viele Elemente in einem Array enthalten sind. Ich verwende das Blockui JQuery Plugin Um eine Nachricht anzuzeigen, während die AJAX -Anrufe getätigt werden, zeige ich die Ergebnisse und entferne die Blockui -Nachricht, indem ich $ .unblockui () aufgerufen wird.

Problem: Aus irgendeinem Grund, egal wie oft ich die Ajaxcall -Funktion ausführen möchte, wird nach Abschluss des ersten Ajax -Aufrufs die Messaging entfernt, obwohl die Schleife weiterhin ausgeführt wird und die Ergebnisse in der Divs #Results korrekt angezeigt werden. Ich möchte, dass die volle Anzahl von Schleifen -Iterationen vor dem Entfernen der Nachrichten abgeschlossen wird, aber es scheint, als würde es nicht nacheinander ausführen. Hier ist der fragliche Code:

$("#myButton").live("click", function(){
    $.blockUI({ message: '<img src="new_loader.gif" /><h2>Getting Config Files</h2><small>Please be patient.</small>',
            css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#FFF', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px',  
            color: '#000' 
            } 
        }); 

    for (var i=0; i< myArray.length; i++)
        {
         ajaxCall(myArray[i]);
        }
    $("#results").show('slow');
    $.unblockUI();  
    return false;
});

Gibt es eine Erklärung dafür, warum der Code nach der Schleife ausgeführt wird, obwohl die Schleife noch nicht vollständig ist? Jede Hilfe, die es geschätzt hat! Vielen Dank.

Answer 1

 ajaxCall(myArray[i]);

erledigt asynchron Die Methode ist also gefeuert innerhalb der Schleife, aber der Hinrichtung wird etwas mehr Zeit in Anspruch nehmen und so enden, nachdem der Rest des Codes fertig ist.

In diesem Artikel finden Sie eine schöne Art, mit dieser Art von Verhalten umzugehen: Asynchrone Methode Warteschlangenkettung in JavaScript

Answer 2

Wie auch immer ajaxCall() tut, wenn es eine schafft XMLHttpRequest Asynkron ist dies das richtige Verhalten. Eine AJAX-Anfrage ist nicht blockiert. Ich denke, das ist der Grund, warum Ihr Code nach Ihrer Schleife sofort ausgeführt wird.

Eine mögliche Möglichkeit, mir vorzustellen, dies zu lösen, ist, eine Gegenvariable zu erstellen, die bei jedem Aufruf von von zunehmendem Aufruf erhöht wird ajaxCall() und abnimmt in jedem complete Handler (XHR ReadyState 4). Wenn dieser Zähler zu Null kommt, sollten Sie Ihren Code nach der Schleife ausführen.

function increase() {      // goes into your `ajaxCall()` or `beforeSend` callback
    mynamespace.requests++;
}

function decrease() {      // goes into your `complete` callbacks
    if(--mynamespace.requests) {
        $("#results").show('slow');
        $.unblockUI();  
    }
}

Answer 3

Ich vermute das ajaxCall Ist Async? Dies führt dazu, dass der Code die Schleife nicht blockiert, im Wesentlichen schnell die Schleife abschließt und dann weitergeht.

Sie können eine Rückruffunktion mit einem Zähler bereitstellen, um zu überprüfen, ob alle Ajax -Anrufe abgeschlossen sind.

var count = arr.length - 1;
for(var i = 0; i < arr.length; i++)
{
    ajaxCall(arr[i], function () {
        if(--count == 0)
        {
            /* All AJAX calls complete, continue execution */
        }
    });
}