js での同期、クロージャ、非同期リクエストの組み合わせを簡単に理解する-jsチュートリアル-php.cn

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

php是最好的语言

リリース： 2018-08-01 11:07:05

オリジナル

2231 人が閲覧しました

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

受信したバックグラウンドは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);
    })
}

ログイン後にコピー

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

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

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

ajaxのコールバック出力は同じで、11 11になります
js での同期、クロージャ、非同期リクエストの組み合わせを簡単に理解する

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);
    })
}

ログイン後にコピー

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

非同期に切り替えた後
バックグラウンドで受信したデータが変更されており、予想される0~10ではありません
js での同期、クロージャ、非同期リクエストの組み合わせを簡単に理解する

ajaxコールバックの出力は同じで、11 11になります
js での同期、クロージャ、非同期リクエストの組み合わせを簡単に理解する

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 同期リクエストと非同期リクエストの違い分析