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

Question

我正在构建一个 MVC 项目。我获取用户当前位置的城市并将其放在网页的右上角，这是运行的第一个 JavaScript 代码。第二个 JavaScript 代码运行以获取该城市的天气状况。但是当运行获取天气的js时，第一个js还没有设置城市名称。

所以，我需要确保在运行第二个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>

第二个代码是 Angular 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>

Answer 1

几个选项:

1. 使用事件，加载数据后，您可以调度全局事件并在其他任何地方监听该事件。 observer 模式是在 jQuery 中实现的，所以既然您已经使用了 jQuery，这很容易。 ( $.on 和 $.trigger )

2. 由于您使用的是 jsonp，因此可以使用 jsonp 回调。 维基上的进一步解释:https://en.wikipedia.org/wiki/JSONP#Callback_name_manipulation_and_reflected_file_download_attack

3. 显然使用间隔(setInterval 并检查值元素)，尽管这不是一个好方法

我认为选项 1 是最好的方法。

我已经考虑到代码是完全分开的，并且您不想将 Angular 耦合到第一部分。