Question

我从远程网址获取一些json数据并迭代集合中的每个项目，并在此过程中从数据创建新对象并将它们推送到新数组

function getPoints(year) {

    var heatmapdata = [];

    var promise = $.getJSON('/api/GetHeatMapData?nodeid=@UmbracoContext.PageId&year=' + year);

    promise.done(function (data) {
        $.each(data, function (i, item) {
            heatmapdata.push({ location: new google.maps.LatLng(item.Location.lat, item.Location.lng), weight: item.Weight });
        });
    });

    return heatmapdata;
}

在我的浏览器（Chrome）中，我在返回行上贴了一个断点，它表示数组长度为零。在我的浏览器控制台中，如果我调用getPoints(2010)，则返回[]。如果我在下面的一行上留下一个断点，我可以看到物品被推入阵列：

heatmapdata.push({ location: new google.maps.LatLng(item.Location.lat, item.Location.lng), weight: item.Weight });

我长期以来一直在努力解决这个问题并担心我会遗漏一些明显的东西？

Answer 1

正如GIT博士所说，这种情况正在发生，因为$.getJSON是一个异步函数。

当javascript遇到异步函数时，其中的步骤在后台运行，可以这么说，javascript不会等待这些步骤在块中运行其余代码之前完成。

基本上，您不能将return与异步函数一起使用。

目前，您的函数被调用，它会触发$.getJSON，然后立即返回heatmapdata，它仍然是一个空数组，在后台，heatmapdata正在填充，但您不这样做任何与它完成的东西。

有几种方法可以解决这个问题。一种方法是提供如下所示的回调函数，该函数将在您的承诺解决后调用。（您也可以将代码移动到.done函数，使用另一个promise，或使用$ .Deffered）

function getPoints(year, callback) {
    var heatmapdata = [];
    var promise = $.getJSON('/api/GetHeatMapData?nodeid=@UmbracoContext.PageId&year=' + year);
    promise.done(function (data) {
        $.each(data, function (i, item) {
            heatmapdata.push({
                location: new google.maps.LatLng(item.Location.lat, item.Location.lng),
                weight: item.Weight
            });
        });
        callback(heatmapdata);
    });
}

getPoints(year, function(heatmapdata ){ 
   // do something with heatmapdata here  
});

Answer 2

我认为这是因为承诺。因此在执行promise之前调用return语句。

迭代$ .getJSON中的集合并将新对象推入数组会使数组为空

2 个答案: