Updating global variable: 1. Using member function vs. 2. Using AJAX callback function

Question

Background:

I'm building a simple program that uses the simpleWeather.js API to pull in the current temperature to be used by the rest of the program (http://simpleweatherjs.com/).

Updated Code:

All the below code is within an AngularJS controller and the simpleWeather.js file is linked in the index.html file.

var _this = this;
    var seasons = null;

    function myAjaxCheck(callBack){
        $.simpleWeather({
        location: 'Calgary, CA',
        woeid: '',
        unit: 'c',
        success: function(weather) {
          var temperatureTemp = parseInt(weather.temp);
          callBack(temperatureTemp);
        }
      });
    }

    var temperature;

    myAjaxCheck(function(returnedTemperature){
        temperature = returnedTemperature;
        if (temperature > 20){
            _this.seasons = summerCollection; <-- summerCollection is an array strings
        }
    });

Alternative that works:

var _this = this;
    var seasons = null;

    var test = function(){
        _this.seasons = summerCollection;
    };

    test();

UPDATE: Problem:

It seems that I can update the global variable with the member function test() as in the 2nd snippet of code. However, why isn't the global variable updated with the AJAX callback function in the 1st snippet of code?

I have a div in my HTML that uses ng-repeat to spit out all the strings in the summerCollection array. It works with the 2nd snippet of code but does not with the first.

Any help is greatly appreciated!

Any ideas?

Original Problem:

From what I gathered from the web inspector, it appears that the order in which this code loads is (which it should not):

a. $.simpleWeather({...

b. alert(temperature)

c. success: function(weather){...

Any ideas why this is? I know that if I put alert(temperature) in the success:function(weather){} then it'll return the current temperature but this is not what I want.

I ultimately want the variable temperature to hold the current temperature so that I can use this variable in other functions. For instance, I want to be able to set "seasons" to different strings according to the temperature value.

Any help is greatly appreciated!

Answer 1

Well this is the nature of callbacks - they are asynchronous. The code is supposed to run in the order you described.

And what you're doing is correct, except that the alert is running BEFORE your callback is complete (as it should).

So what you need to do is put your alert (and the real code that you want to run), into the callback:

var temperature = null; <-- this variable should store the temperature retrieved by simpleWeather API
var seasons = null;

$.simpleWeather({
    location: 'Calgary, CA',
    woeid: '',
    unit: 'c',
    success: function(weather) {
      temperature = parseInt(weather.temp); <-- Temperature variable defined outside this scope
      alert(temperature);

      // call your remaining code here, which will run after the temperature has been set.
      some_other_function();
    }
  });

function some_other_function() {
}