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 同步請求和非同步請求的差異分析

相關影片：

千鋒教育PHP非同步通訊框架Swoole解讀視訊教學

#

以上是js中同步、閉包與非同步請求結合的簡單理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！