Как запустить 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> 

Второй код угловатые 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

В вашей ситуации я хотел бы сделать два запроса на том же потоке, и использовать async управлять ими.

С асинхронной вы можете использовать метод waterfall, чтобы сделать это:

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; 
     } 
    });  
}); 

Answer 2

Если вы используете Угловое 2, есть что-то называют жизненным циклом Крючки

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

(я не знаю, если это функция с угловым первым вариантом)

Здесь вы можете определить сценарии по жизненному циклу вида o r, а затем вы можете установить эти скрипты в разных циклах жизненного цикла.

Я надеюсь, что это поможет.

Answer 3

Несколько вариантов:

1. использовать событие, после загрузки данных вы можете направить глобальное событие и слушать, что где-то еще. шаблон observer реализован в jQuery, так как вы уже используете jQuery, это легко. ($ .on и $ .trigger)

2. Поскольку вы используете jsonp, вы можете использовать обратный вызов jsonp. далее объяснение в Wiki: https://en.wikipedia.org/wiki/JSONP#Callback_name_manipulation_and_reflected_file_download_attack

3. , очевидно, используя интервалы (setInterval и проверить значение элемента), хотя это не хороший подход

В моих вариантах мнения 1 является лучшим подходом.

Я принял во внимание, что коды полностью разделены, и вы не хотите связывать углы с первой частью.