如何从一个回调建设变量，.getjson后返回一个变量，。每

的问题如何从一个回调建设变量，.getjson后返回一个变量，。每

我试图找出如何返回HTML，我已经从一个jQuery的JSON文件建。

我似乎已经得到了returnLocations()等到getLocations()完成使得可变locationsBody与从我.each循环收集的信息完成。麻烦（我认为）是我不能够返回该变量输出到我的HTML页面。

问题

我怎样才能返回变量locationsBody？

注意

（有可能是在下面的代码中的错误，因为我修剪下来的最好我能，但我认为它应该说明问题带或不带他们）

的jQuery的

全局变量

var locationsFull = 'un d fined'; 
var locationsOpener = '' + 
    '<div class="locations-header">places youve been</div>' + 
    '<div class="locations-container">' + 
     '<div class="locations-nav left">left</div>' + 
     '<div class="locations-nav right">right</div>' 
; 
var locationsBody = '<div class="locations-inner">'; // opening of container 
var locationsCloser = '</div>'; // closing of container

功能

function locationsFunction() { 
    function getLocations() { 
     var wait = $.Deferred(); 
     var area = 'Area1'; 
     var counter = 1; 
     $.getJSON("locations.json", function(data) { 
      $(data.places).each(function() { 
       var location = this.location; 
       var image = this.image; 
       if (this.area === 'Area1') { 
        if (counter == 2) { 
         locationsBody = locationsBody + 
          '<div class="locations-places">' + 
           '<img src="images/places/' + image + '">' + 
           '<div class="locations-places-image">' + location + '</div>' + 
          '</div></div>' 
         ; 
         counter = 0; // added closing of container, reset to 0 
        } else { 
         locationsBody = locationsBody + 
          '<div class="locations-places">' + 
           '<img src="images/places/' + image + '">' + 
           '<div class="locations-places-image">' + location + '</div>' + 
          '</div>' 
         ; 
         counter = counter + 1; 
        } 
       } 
      }) 
      wait.resolve(); 
     }) 
     return wait; 
    } 
    function returnLocations() { 
     locationsFull = locationsOpener + locationsBody + locationsCloser; // works, proven in alert and console.log 
     //alert(locationsFull); // works 
     console.log(locationsFull); // works 
     //return locationsFull; // doesnt work 
     //return 'anything'; // doesnt work 
    } 
    getLocations().then(returnLocations); 
}

通话

$(function() { 
    $('.locations-body').html(locationsFunction()); 
})

JSON文件

{"places":[ 
    { 
     "area": "Area1", 
     "location": "Downtown", 
     "image": "downtown.jpg" 
    }, 
    { 
     "area": "Area1", 
     "location": "Uptown", 
     "image": "uptown.jpg" 
    } 
]}

的HTML

<div class="locations-body"></div>

进一步注：类似这样的问题已经被问单独数十次的计算器和这些问题和答案有几十万的读取。在过去的两天里，我已经阅读了所有的热门文章。我的问题是我无法彻底理解答案，并将其应用于我的确切情况，因为似乎是几十（数百/数千？）人提出这些问题的问题以及成千上万（百万？）的人一直在寻找异步问题的解决方案。

来源

2017-06-14 Hastig Zusammenstellen

如果可行，您可以在returnLocations()函数中调用.html()函数。

功能

function returnLocations() { 
    locationsFull = locationsOpener + locationsBody + locationsCloser; 
    $('.locations-body').html(locationsFull); 
}

通话

$(function() { 
    locationsFunction(); 
}

否则，你就需要考虑回调，read this，如果你需要做这样我可以更新我的稍后回答一个例子。

来源

2017-06-14 00:45:05

Awww男人，我很尴尬我没有想到：D非常感谢你，它现在工作正常！ –

我可以问一下，是否返回locationsFull;'不工作，因为与'返回等待'有关的事情？我想知道我是否对“返回”有一个根本的误解。 –

欢迎您！它不起作用，因为它是在异步调用之后。这意味着代码的其余部分继续运行。因此，'locationsFunction（）'在返回语句被创建之前解析。 –

你试过

return wait.promise();

而不是返回递延的？然后调用这样的：

var deferredChain = $.Deferred(); 
deferredChain.then(getLocations).then(returnLocations); 
deferredChain.resolve();

来源

2017-06-14 00:45:13

这是更多的评论而不是答案 – aug

感谢答复安德烈。我试图让你的答案工作，但我需要更多地练习'.promise'和'.resolve'来学习如何在现有的代码中实现这个功能。 –

今天干脆把.done在$.getJSON年底似乎工作完全一样，而且比使用$.Deferred与代码相关的线，使其工作更容易，我发现。

function locationsFunction() { 
    var area = 'Area1'; 
    var counter = 1; 
    $.getJSON("locations.json", function(data) { 
     $(data.places).each(function() { 
      var location = this.location; 
      var image = this.image; 
      if (this.area === 'Area1') { 
       if (counter == 2) { 
        locationsBody = locationsBody + 
         '<div class="locations-places">' + 
          '<img src="images/places/' + image + '">' + 
          '<div class="locations-places-image">' + location + '</div>' + 
         '</div></div>' 
        ; 
        counter = 0; // added closing of container, reset to 0 
       } else { 
        locationsBody = locationsBody + 
         '<div class="locations-places">' + 
          '<img src="images/places/' + image + '">' + 
          '<div class="locations-places-image">' + location + '</div>' + 
         '</div>' 
        ; 
        counter = counter + 1; 
       } 
      } 
     }) 
    }).done(function() { 
     locationsFull = locationsOpener + locationsBody + locationsCloser; 
     $('.locations-body').html(locationsFull); 
    }); 
}

来源

2017-06-14 17:58:52

如何从一个回调建设变量，.getjson后返回一个变量，。每

回答

相关问题