Scope variable in ajax call

Question

Why the final console log is undefined?Variable time has a global scope and ajax call is async.

This is my code:

var time;
$.ajax({
    async: false,         


        

Answer 1

Change async to the boolean false.

http://api.jquery.com/jQuery.ajax/

var time;
$.ajax({
    async: false,
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function (data) {
        console.log(data);
        time = data;
    },
    error: function (data) {
        console.log("ko");
    }
});

console.log(time);

Also, note that if you need to use dataType: 'jsonp' here for cross-domain, you won't be able to synchronize -- so use a promise.

var time;
$.ajax({
    dataType: 'jsonp',
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function (data) {
        time = data;
    },
    error: function (data) {
        console.log("ko");
    }
})
.then(function(){ // use a promise to make sure we synchronize off the jsonp
    console.log(time);    
});

See an example like this here using Q.js:

DEMO

Answer 2

In your code, you initialize the global variable 'time' as 'data'. Where does this data variable come from? If the data variable is not global also, when you try to use console.log(time); , it may be undefined because the data variable is undefined.

Make sure both variables are within scope to be used globally. That might work. Good luck!

Answer 3

OK, a bit contrived, but I hope it shows the point regarding scope of time and timing ...

$.ajax({
    async: false,
    dataType: 'jsonp',
    type: 'GET',
    url: "http://www.timeapi.org/utc/now.json",
    success: function (data) {
        console.log(data.dateString);
        time = data.dateString;
    },
    error: function (data) {
        console.log("ko");
    }
});

window.setTimeout("console.log('time: '+time)",3000);

JSfiddle