javascript - Why a code continues when the function doesnt return value yet. (in xmlhttprequest, calling php file.) Is it related to Sync/Async functions?

Solution:

The problem is indeed due to the asynchronous nature of thesend method ofXMLHttpRequest - and therefore of yourupdate, which calls it.

When you callupdate(), which itself calls this:

loadFile("update.php", function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
        document.getElementById("content").innerHTML = xmlhttp.responseText;
    }
});
Copy code

all that happens is that you set up anXMLHttpRequest object and use itssend method to send a request, telling it to call this function:

function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
        document.getElementById("content").innerHTML = xmlhttp.responseText;
    }
});
Copy code

as a "callback" when thereadyState changes. (And in particular, when the request is complete and a response received.) But callingupdate does not wait for that state change to happen and block your code from running - hence the next lines of code, which set thedisabled state of the button to false and log to the console - are executed straight away. So the button gets disabled but then instantly un-disabled, and therefore you never see it disabled. (In fact the browser will never even "paint" the screen with a disabled button, since it doesn't get a chance to do this while your code is running, so even if you could in theory do a freeze-frame here you would never see a disabled button.)

To fix it, you have to work with the asynchronous code you're using. Anything you want to happen after the state change has to take place in the callback function you pass it. So you can simply fix your problem by changing theupdate definition to this:

function update(){
    loadFile("update.php", function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("content").innerHTML = xmlhttp.responseText;
            global_button.disabled = false;
            console.log("AFTER FUNCTION RETURN VALUES");   
        }
    });
}
Copy code

and delete those two lines of code from the place you've currently got them, after theupdate call.

Although note that this will only work ifglobal_button is in scope insideupdate, which it might not be depending on how your code is structured (it probably shouldn't be to be honest). And even if it does, it's not good to hardcode yourupdate to always undisable the button afterwards, with no guarantee the button will even be disabled first.

It's therefore better to defineupdate to itself take a callback function:

function update(callback){
    loadFile("update.php", function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("content").innerHTML = xmlhttp.responseText;
            callback();   
        }
    });
}
Copy code

and then call it like this in your main code:

    global_button.disabled = true;
    update(function() {
        global_button.disabled = false;
        console.log("AFTER FUNCTION RETURN VALUES");
    });
Copy code

because this separates the concerns ofupdate itself ("make this request and set thecontent inner HTML to the response"), from whatever you might want to do afterwards, which could be different each time.

Finally, I can't not mention that this callback-based asynchronous code is very old-fashioned now.XMLHTTPRequest itself is quite a cumbersome API. I highly recommend you look into its modern equivalent,fetch, which is based on Promises - which while not without their mental gotchas are a much more understandable way to write asynchronous code. In particular withasync andawait you can write code that looks much like what you originally had: puttingawait update(); would actually do what you are waiting, and have the rest of your code wait forupdate to complete. But you can't just make that change to your original code because that only works ifupdate returns a Promise, which in turns would mean completely rewriting yourloadFile to use a more modern, Promise-based approach.