Modify global variable from ajax request

Question

I know this has been asked countless times, but i can't figure out the problem. As far as i know, you can modify global variables inside functions in javascript. It doesn't work for me.

var lastMessage = 0;
function loadChat() {
$.post("/lastmessage", { roomid: roomId })
    .done(function(data) {
        var response = JSON.parse(data);
        if (response.state == "success") {
            lastMessage = response.message;
            console.log("Inside: " + lastMessage);
        }
    });
}

console.log("Outside: " + lastMessage);

This gives me

Outside: 0
Inside: 17

The inside value is correct, the outside is not. What could the problem possibly be?

Answer 1

It's asynchronous, therefore when you call it from outside, it has not finished executing yet. What this means is that this part of your code is only reached once the post has completed

.done(function(data) {
        var response = JSON.parse(data);
        if (response.state == "success") {
            lastMessage = response.message;
            console.log("Inside: " + lastMessage);
        }
    });

but console.log("Outside: " + lastMessage); will continue executing without waiting, since post is asynchronous.

If you want something to happen after you retrieve the value you, one option would be to use a callback function, such as:

function printMessage(message) {
    console.log(message)
}

function loadChat(callback) {
$.post("/lastmessage", { roomid: roomId })
    .done(function(data) {
        var response = JSON.parse(data);
        if (response.state == "success") {
            lastMessage = response.message;
            callback(lastMessage);
        }
    });
}

loadChat(printMessage);