Une compréhension simple de la combinaison de synchronisation, de fermeture et de requêtes asynchrones dans js

Jetons d'abord un coup d'œil à la requête synchrone

L'arrière-plan reçu est de 0 à 10
La sortie de rappel ajax est également de 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);
    })
}

Après le passage en mode asynchrone
Les données reçues en arrière-plan ont changé de 0 à 10, ce qui n'est pas attendu

La sortie de rappel d'ajax est la même et devient 11 11

L'ordre d'exécution d'ajax est après l'exécution de la boucle for et i devient 11
Doit être exécuté quand ajax est exécuté Ce n'est qu'en gardant une référence à i que l'effet attendu peut être obtenu

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)//实参}

De cette façon, la valeur reçue en arrière-plan peut être cohérente avec la valeur sortie par le premier plan

Premier coup d'oeil à la demande de synchronisation
Reçu en arrière-plan La sortie du rappel ajax est 0~10
La sortie du rappel ajax est également 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);
    })
}

Après le passage en mode asynchrone
Les données reçues en arrière-plan ont changé de la valeur attendue de 0 à 10

La même chose est vrai pour la sortie de rappel ajax, qui est devenue 11 11

L'ordre d'exécution d'ajax est après l'exécution de la boucle for, i devient 11
Vous devez conserver une référence à i pendant l'exécution d'ajax pour obtenir l'effet attendu

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)//实参}

De cette façon, l'arrière-plan reçoit La valeur peut être cohérente avec la valeur sortie par le front-end

Articles connexes :

Résumé des méthodes et des différences entre le traitement synchrone et asynchrone dans les compétences js_javascript

Analyse des différences entre les requêtes synchrones ajax et les requêtes asynchrones

Vidéos associées :

Tutoriel vidéo d'interprétation Swoole du cadre de communication asynchrone PHP Qianfeng Education

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!