Question

我正在尝试从一个函数中检索一个值，并希望在另一个函数中使用该值。此函数返回一个城市，州和我在屏幕上显示。

<script>
$.get("http://ipinfo.io", function (response) {
$("#address").html(response.city + ", " + response.region);
}, "jsonp");
</script>

<div id="address"></div>

但我想将城市价值用于另一块使用城市价值返回当前天气的JS。那段代码在这里：

$(document).ready(function() {
loadWeather('Baltimore',''); //@params location, woeid
});

'Baltimore'目前在JS中是硬编码的，我希望将上面返回的城市值放在天气功能中。天气功能似乎只接受城市作为字符串，而不是像下面的答案所呈现的代码片段。我可以将生成的城市变成一个变量，然后传递给天气函数吗？

Answer 1

您可以考虑在loadWeather() AJAX调用的回调函数中调用get()函数：

<script>
    $(function(){
         // Get your city information
         $.get("http://ipinfo.io", function (response) {
              // At this point you have a response, so use it
              $("#address").html(response.city + ", " + response.region);
              // Pass the city to your loadWeather function
              loadWeather(response.city,''); 
         }, "jsonp");
    });
</script>

您调用这些功能的顺序非常重要，因为loadWeather()功能明显取决于您从get()电话中搜索某个值（因为您实际需要城市加载天气）。

Answer 2

在拥有该值之前，您无法使用某个值。当您拥有所需的值时，请调用其他函数。

$(document).ready(function() {
  $.get("http://ipinfo.io", function (response) {
    $("#address").html(response.city + ", " + response.region);
    loadWeather(response.city,''); //@params location, woeid
  }, "jsonp");
});

Answer 3

在loadWeather回调中拨打jQuery.get()，loadWeather可以response访问loadWeather(getLocationFromIp());中的数据，但不能真正回答原来的问题：如何使用信息从另一个功能？最简单的解决方案是将事物分成单独的函数，因此您可以使用一个函数的输出作为另一个函数的参数：

''

但是，这不起作用，因为获取位置数据的操作是异步 - 没有办法确定何时从服务器获取所需的数据。这就是你首先使用回调函数的原因。

使用Promises共享异步数据

您可以通过using jQuery's deferred/promise features来解决这个问题，同时保持天气更新和位置更新功能的分离。这也让您有机会处理ipinfo.io失败的位置请求。

在我们处理它时，让我们处理案例（如我的），其中ipinfo.io为城市和地区返回$(document).ready(function() { getLocationFromIp() .done(function(response) { var has_city = (response.city && response.region); var location = has_city ? (response.city + ', ' + response.region) : response.loc; $('#address').html(location); loadWeather(location); }) .fail(function() { alert('Error getting location info. Try reloading in a moment.'); }); }); function getLocationFromIp() { return $.getJSON('http://ipinfo.io'); }。在那种情况下，回到纬度＆amp;经度仍将为simpleWeather插件提供所需的内容。

getLocationFromIp

好的，但是使用promises和单独的alert()函数有什么意义呢？除了失败消息（simpleWeather可以处理得比$.get()更好），您可以在原始jQuery.data()回调中执行所有操作。

使用缓存重用数据

当你移动一些超出笔目前正在做的东西时，会出现将东西分解成较小的独立部分的好处。现在，您可以使用其他方法将一个函数的数据传递给另一个函数来执行更新天气，而无需从ipinfo.io重新请求位置数据。

我猜测，从位置搜索字段和使用Google地图自动填充功能，您可以更加关注此代码。所以让我们继续并稍微扩展一下。例如，我们将使用$(document).ready(function() { getLocationFromIp() .done(function(response) { var has_city = (response.city && response.region); var location = has_city ? (response.city + ', ' + response.region) : response.loc; $('#address') .html(location) .data('location', location); loadWeather(location); // update every 10 min setInterval(loadWeather, 60000); }) .fail(function() { // Updating simpleWeather with an invalid location triggers the plugin's error message: loadWeather('0'); }); }); function getLocationFromIp() { return $.getJSON('http://ipinfo.io'); } function loadWeather(location) { // if no location argument passed, use cached location var loc = location || $('#address').data('location'); $.simpleWeather({ location: loc, // more simpleWeather config... }); }缓存（存储）用户检测到的位置，然后使用该信息每10分钟刷新一次天气：

input#searchTextField

您可以在此处完整地看到上述方法：http://codepen.io/adammessinger/pen/VaOJdq

使用封装功能共享数据

如果您希望获得更多功能，您还可以通过利用Revealing Module Pattern和闭包来缓存和重用位置信息，而无需触及DOM。

该模块中的所有功能都可以访问当前位置数据。您可以将其中的一些或全部公开为用于操纵天气小部件状态的公共方法。例如，更新天气信息以匹配用户键入WeatherWidget.updateLocation(input.value) $ find . ! -type d -delete的任何位置，或者在用户切换复选框时打开和关闭天气数据的定时刷新。

这种数据捆绑与相关功能的结合是封装的一种形式，面向对象编程的一个方面。但是我离原来的问题很远，所以我会留下它。

使用从一个功能到另一个功能的信息

3 个答案:

使用Promises共享异步数据

使用缓存重用数据

使用封装功能共享数据