jQuery - getJson等待每个循环内的函数在继续之前完成

问题描述：

我从PHP获取一些数据，代码一切正常，我的PHP的结果是一个按Likes排序的json列表。jQuery - getJson等待每个循环内的函数在继续之前完成

的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>'); 

       }); 




      }); 
     }); 
    }

不要等待地理位置调用结束;那只会浪费时间。而是按照您的要求进行呼叫，然后立即显示所有内容。如果需要，也可以“排序（）”。 –

我的电话当时仅限于10个结果，当向下滚动时会加载更多结果。列表很难排序 – SNos

答

我认为你的瓦尔我，名和喜欢在内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，所以你不要不依靠外部范围变量名称和喜欢的价值。

jQuery - getJson等待每个循环内的函数在继续之前完成

相关推荐