js での同期、クロージャ、非同期リクエストの組み合わせを簡単に理解する

まずは同期リクエストを見てみましょう

受信したバックグラウンドは0~10です
ajaxコールバックの出力も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);
    })
}

非同期に切り替えた後は
バックグラウンドで受信したデータが変化しています予想される0~10ではありません

ajaxのコールバック出力は同じで、11 11になります

ajaxの実行順序はforループの実行後、iは11になります
ajaxのときに実行する必要がありますi への参照を保持することによってのみ、期待される効果を達成できます

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

このようにして、バックグラウンドによって受信される値は、フロントデスクによって出力される値と一致することができます

まず、同期リクエストを見てみましょう
バックグラウンドで受信するデータは0~10です
ajaxのコールバック出力も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);
    })
}

非同期に切り替えた後
バックグラウンドで受信したデータが変更されており、予想される0~10ではありません

ajaxコールバックの出力は同じで、11 11になります

ajaxの実行順序はforループの実行後であり、iは11になります
これを実現するには、ajaxが実行されるときにiへの参照を保持する必要があります期待される効果

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

このようにして、バックグラウンドで受け取った値とフロントで出力した値を比較することができます 値が一貫しています

関連記事:

同期処理と非同期処理の方法と違いのまとめjs_javascript スキル

ajax 同期リクエストと非同期リクエストの違い分析

関連ビデオ:

Qianfeng Education PHP 非同期通信フレームワーク Swoole 解釈ビデオチュートリアル

以上がjs での同期、クロージャ、非同期リクエストの組み合わせを簡単に理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。