ajax的循環

一、業務需求

在開發中，當一個列表頁面加載完成后，我需要根據列表每一項的id去服務器端獲取對應的數據然后再把獲取的數據賦給當前id對應的標簽。

例如如下表格：

我有一系列的商品編號，我需要根據商品編號通過ajax到服務器獲取商品對應的名稱，然后再用js更新界面(實際中的業務當然不是獲取商品名稱這么簡單)

 

二、實現方案

2.1 錯誤方案

一般情況下，我們會直接想到，直接寫個for循環，在循環內發起ajax請求獲取數據，再把獲取的數據更新到對應的id對應的標簽上，

如下：

我們以數組模擬一些列id：

var array = [1, 3, 2, 5, 3];

循環的ajax請求方法：

function foreach_ajax() {
        for (var i = 0; i < array.length; i++) {
            $.get("/home/loop_ajax", { value: array[i] }, function (data) {
                console.log(array[i]+","+data);

            });
        }
       
    }

調用：

$(function () {
        foreach_ajax();      
    });

測試結果如下：

我們可以看到，在循環的內部我們根本取不到array[i]的值。

導致這種結果的原因是：ajax是異步執行的，在循環結束的時候第一次ajax還沒有將服務器數據返回，而循環結束的時候for中的變量i已經釋放了，所以array[i]=undefined

2.2 正確方案

正確的方式是以遞歸的方式循環ajax。

如下：

我們以數組模擬一些列id：

var array = [1, 3, 2, 5, 3];

遞歸的ajax請求方法：

function Loop_ajax(index, array) {
        if (index < array.length) {           
            var value = array[index];
            $.get("/home/loop_ajax", { value: value }, function (data) {
                console.log(array[index] + "," + data);
                if (index < array.length) {
                    Loop_ajax(index + 1, array);                    
                }

            });
        }
    }

調用：

 $(function () {
       Loop_ajax(0, array);
    });

測試結果如下：