如何运行2个JavaScript代码以获得正确结果

我正在构建一个MVC项目。我得到用户的当前位置的城市，并将其放在网页的右上角，这是第一个运行的JavaScript代码。第二个JavaScript代码运行得到该城市的天气状况。但是，当运行js获取天气的时候，城市名称不是由第一个js设置的。如何运行2个JavaScript代码以获得正确结果

因此，我需要确保在运行第二个js之前，第一个js完成。我怎样才能做到这一点？

这里是我的js代码。

上首先是jQuery代码

<script> 
    function GetUsersInfo() 
    { 
     $.get("http://ipinfo.io", function (response) { 
      $("#cityName").html(''+response.city); 
      if ($("#cityName").html === "") 
      { 
       $("#cityName").html("İstanbul"); 
      } 
     }, "jsonp"); 
    } 
    GetUsersInfo(); 
</script>

二码为角JS

<script> 
var app = angular.module("ZenHaberApp", []); 
app.controller("WeatherController", function ($scope, $http) { 
    var $city = document.getElementById("cityName").innerHTML 
    alert($city) 
    $http.get('http://localhost:62747/api/getweatherbycityname/' + $city). 
     success(function (data, status, headers, config) { 
      $scope.weathers = data.condition_temp; 
     }). 
     error(function (data, status, headers, config) { 
      alert(status); 
     }); 
}); 
</script>

来源

2016-10-30 Arif YILMAZ

在你情我愿做相同流上的两个请求，并使用async来管理它们。

带有Async您可以使用waterfall方法来做到这一点：如果您正在使用角2

var async = require('async'); 

var app = angular.module("ZenHaberApp", []); 
app.controller("WeatherController", function ($scope, $http) { 

    async.waterfall([ 
     function (callback) { 
     // Make the request to get the city, if jsonp needed check $http.jsop method (remember to use the $sce module to trust the source) 
     // Assign the city to a $scope variable, which with angular simple add {{city}} to show to the user 
     // Async takes callbacks with two params (error, result) so you could do callback(err, city) 
     }, 
     function (city, callback) { 
     $http.get('http://localhost:62747/api/getweatherbycityname/' + city). 
     success(function (data, status, headers, config) { 
      callback(null, data) 
     }). 
     error(function (data, status, headers, config) { 
         callback(true); 
     }); 
     } 
    ], function (err, result) { 
     if (err) { 
     // Handle error 
     } else { 
     $scope.weathers = data.condition_temp; 
     } 
    });  
});

来源

2016-10-30 19:28:53

谈谈回拨地狱大声笑 – Derek

@Derek其实异步被设计为结束回调地狱 –

承诺是旨在结束回调地狱。你发布的代码示例仍然有回调，因此仍然是回调地狱。承诺没有回调。 – Derek

，也有一些是调用生命周期挂钩

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

（我不知道如果是一个角度的第一个版本功能）

在那里你可以定义沿着视图的生命周期的脚本o r组件，然后您可以在不同的生命周期挂钩中设置该脚本。

我希望有帮助。

来源

2016-10-30 19:34:01

几个选项：

使用事件，加载数据后，你可以派遣一个全球性的事件并倾听其他地方。 observer模式在jQuery中实现，因为您已经使用jQuery，这很容易。（$ .on和$ .trigger）
由于您使用的是jsonp，因此您可以使用jsonp回调。在维基进一步解释：https://en.wikipedia.org/wiki/JSONP#Callback_name_manipulation_and_reflected_file_download_attack
显然是在利用间隔（setInterval的检查元素的值），虽然这不是一个好办法

在我看来选项1是最好的办法。

我已经考虑到代码是完全分开的，而且你不想将角度与第一部分耦合。

来源

2016-10-30 19:37:06 jony89

如何运行2个JavaScript代码以获得正确结果

回答

相关问题