Ein einfaches Verständnis der Kombination aus Synchronisation, Schließung und asynchronen Anforderungen in js

Werfen wir zunächst einen Blick auf die Synchronisierungsanforderung

Der empfangene Hintergrund ist 0~10
Die Ajax-Callback-Ausgabe ist ebenfalls 0~10

for (var index = 0; index <= 10; index++) {
    $.ajax({
        async: false,//同步
        url: &#39;/HelloWorld&#39;,
        type: &#39;POST&#39;,
        dataType: &#39;html&#39;,
        data: {index: index}
    }).done(function () {
        console.log(index);
    })
}

Nach dem Wechsel zu asynchron
Die im Hintergrund empfangenen Daten haben sich um 0–10 geändert, was nicht erwartet wurde

Ajax Das Gleiche gilt für die Callback-Ausgabe.

Die Reihenfolge der Ajax-Ausführung erfolgt nach der Ausführung der for-Schleife.
Muss beibehalten werden Die Ausrichtung, wenn Ajax ausgeführt wird, kann den erwarteten Effekt erzielen

for (var index = 0; index <= 10; index++) {
    (function (num) {//形参
        $.ajax({
            async: true,//异步
            url: &#39;/HelloWorld&#39;,
            type: &#39;POST&#39;,
            dataType: &#39;html&#39;
        })
            .done(function () {
                console.log(num);
            })
    })(index)//实参}

Auf diese Weise kann der vom Hintergrund empfangene Wert mit dem von der Rezeption ausgegebenen Wert übereinstimmen

Schauen Sie sich zuerst die Synchronisierungsanforderung an
Der empfangene Hintergrund ist 0 ~10
Die Ajax-Rückrufausgabe ist ebenfalls 0 ~10

for (var index = 0; index <= 10; index++) {
    $.ajax({
        async: false,//同步
        url: &#39;/HelloWorld&#39;,
        type: &#39;POST&#39;,
        dataType: &#39;html&#39;,
        data: {index: index}
    }).done(function () {
        console.log(index);
    })
}

Nach dem Umschalten auf asynchron
vom Hintergrund empfangen Die Daten haben sich geändert, was nicht den erwarteten 0 bis 10 entspricht

Dasselbe gilt für die Ajax-Rückrufausgabe, die ist zu 11 11 geworden

Ajax-Ausführung Nachdem die for-Schleife sequentiell ausgeführt wurde, wird i zu 11
Sie müssen einen Verweis auf i beibehalten, wenn Ajax ausgeführt wird, um den erwarteten Effekt zu erzielen

for (var index = 0; index <= 10; index++) {
    (function (num) {//形参
        $.ajax({
            async: true,//异步
            url: &#39;/HelloWorld&#39;,
            type: &#39;POST&#39;,
            dataType: &#39;html&#39;
        })
            .done(function () {
                console.log(num);
            })
    })(index)//实参}

Auf diese Weise kann der im Hintergrund empfangene Wert mit dem im Vordergrund ausgegebenen Wert verglichen werden. Werte sind konsistent

Verwandte Artikel:

Zusammenfassung von Methoden und Unterschieden zwischen synchroner und asynchroner Verarbeitung in js_javascript-Kenntnissen

Ajax-synchrone Anfrage und Differenzanalyse asynchroner Anfragen

Ähnliche Videos:

Qianfeng Education PHP asynchrones Kommunikationsframework Swoole-Interpretationsvideo-Tutorial

Das obige ist der detaillierte Inhalt vonEin einfaches Verständnis der Kombination aus Synchronisation, Schließung und asynchronen Anforderungen in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!