Changing a global variable via an AJAX call

Question

Changing a global variable via an AJAX call

I seem to be facing a common issue that many others have encountered. Despite my understanding that global variables can be modified inside functions in Javascript, I am struggling with this concept in practice.

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

After running the code snippet above, I get the following output:

Outside: 0
Inside: 17

While the value displayed inside the function is correct, the one outside of it remains unchanged. What could potentially be causing this discrepancy?

javascript json

Answer 1

Answer №1

When you call this asynchronous function from outside, it has not finished executing yet. This means that the code after the function call only runs once the operation is complete.

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

However,

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

will continue executing without waiting for the asynchronous function to finish.

If you want to perform an action after getting the value, one approach is to use a callback function like this:

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

Answer 2

When you call this asynchronous function from outside, it has not finished executing yet. This means that the code after the function call only runs once the operation is complete.

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

However,

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

will continue executing without waiting for the asynchronous function to finish.

If you want to perform an action after getting the value, one approach is to use a callback function like this:

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

Changing a global variable via an AJAX call

Answer №1

Similar questions

Optimal approach for verifying the POST request payload

Place the script tags within the window.load function inside the head section

unable to decode JSON into a structure

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

Steps to remove OTP from dynamodb after a specified time period (2 minutes)

Sinon threw an assertion error out of the blue

The SVG format quickly displays new and larger datasets on line charts without any transition effects

Manipulate Angular tabs by utilizing dropdown selection

Can you explain the purpose of this function on Google PlusOne?

React - optimize performance by preventing unnecessary re-renders of an object property

What are the best methods for creating JavaScript charts that efficiently handle massive amounts of data?

I am hoping for the outcome to be directed to the homepage

Having trouble with running sudo commands on Hyper in Windows 10?

Threejs file exporter from Blender generating corrupted files

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

Problem encountered while downloading dependencies with Snyk

Tips for showcasing the information from a JSON document in React

"Encountered an error: AngularJS is unable to read the property 'push' as it is

Eliminate redundant XML entries when using jQuery autocomplete

Adjust scale sizes of various layers using a script