jQuery - getJson等待每個循環內的函數在繼續之前完成

Question

我從PHP獲取一些數據，代碼一切正常，我的PHP的結果是一個按Likes排序的json列表。

的getJSON導致：

[{"ref":"2038", "name":"aaa", "likes":"10"}, 
{"ref":"2032", "name":"sss", "likes":"9"}, 
{"ref":"1875", "name":"off", "likes":"6"}, 
{"ref":"0087", "name":"mki", "likes":"3"}, 
{"ref":"1256", "name":"qvb", "likes":"3"}, 
{"ref":"8754", "name":"dsa", "likes":"2"}, 
{"ref":"4359", "name":"ety", "likes":"0"}, 
...] 

我的問題是，當我環槽的結果，地理位置函數被調用，以計算各部件的距離。看起來地理定位功能不是同時被調用，並且列表混淆了。

我的問題是：如何等待地理位置函數計算距離，將結果追加到列表中並繼續到下一個元素？我正在研究使用promise，但我不確定如何將其與我的代碼一起使用。

的jQuery：

function loadAllMembersData() { 

     var url_featured = "https://example.com/BBB?members=all"; 

     $.getJSON(url_featured, function (result) { 
      //10 results 
      $.each(result, function (i, field) { 
       var ref = field.ref; 
       var name = field.name; 
       var likes = field.likes; 
       var lat = field.lat; 
       var lng = field.lng; 

console.log(i); //index(i) is fine 0 to 9 



       getLocationServices(lat, lng, function (r) { 

console.log(i); //index(i) becomes mixed up (2, 3, 0, 6,...) 

        var displayDistance = r + " miles away"; 

        $("#membersList ul").append('<li>' + 
          '<a href="#" class="item-link item-content" style="padding: 0">' + 
          '<div>' + displayDistance + '</div>' + 
          '<div>' + name + '</div>' + 
          '<div>' + likes + '</div>' + 
          '</a>' + 
          '</li>'); 

       }); 




      }); 
     }); 
    } 

Answer 1

我認爲你的瓦爾我，名和喜歡在內getLocationServices回調奇怪的行爲是正常行爲。它們是在$ .each回調中定義的外部範圍變量，它是getLocationServices回調的外部範圍，但是，當回調訪問它們 - 稍後幾秒 - 時，$ .each已經將它們設置爲新值在隨後的迭代中。事實上，我發現你的評論很奇怪，說我正在混淆，而我期望我始終是9回調內，而名稱和喜歡 vars是最新的JSON元件。也許你以後在代碼中碰到了相同的變量，所以當回調訪問它們時，它們會以某種方式隨機混合？

好，如果我理解你的問題很好，這樣就可以解決問題：

function loadAllMembersData() { 

    var url_featured = "https://example.com/BBB?members=all"; 

    $.getJSON(url_featured, function (result) { 
     //10 results 
     $.each(result, function (i, field) { 
      var ref = field.ref; 
      var name = field.name; 
      var likes = field.likes; 
      var lat = field.lat; 
      var lng = field.lng; 

      console.log(i); //index(i) is fine 0 to 9 


     (function(theName , theLikes){ 
      getLocationServices(lat, lng, function (r) { 

       console.log(i); //This will be fucked up. It's the standard behaviour 
       console.log(theName); //But now, this value should be correctly fixed to its outer scope counterpart. 

       var displayDistance = r + " miles away"; 

       $("#membersList ul").append('<li>' + 
         '<a href="#" class="item-link item-content" style="padding: 0">' + 
         '<div>' + displayDistance + '</div>' + 
         '<div>' + theName + '</div>' + 
         '<div>' + theLikes + '</div>' + 
         '</a>' + 
         '</li>'); 

      }); 
     })(name , likes); 
     }); 
    }); 
} 

在每一個迭代。每次，您通過該項目的值作爲參數傳遞給IIFE，所以你不要不依靠外部範圍變量名稱和喜歡的價值。