firebase方法结束前另一个方法运行的问题reactjs

Question

First of all, this lambda works at the click of a button. When I press the button as I refresh the page, I get an "undefined" message from the console. but when I wait for a short while (without refreshing the page) and click the button again, I can see the value I expected on the console. For this, I thought of using sleep function, but I don't want to use it. Can I solve this with a mechanism used in multi-thread programs like lock/synchronized?

and importantly, what is the reason for this?

Note that: I'm new to react and web development.

Code;

const handleAddCarPark = () => {
    
    var dbRef = fire.database().ref("foo/bar/qux");
    var newParkID;
    var copy_count;

    dbRef.child("count").on("value", snapshot => {
        newParkID = parseInt(snapshot.val()) + 1000000;
        copy_count = parseInt(snapshot.val());
    });

    console.log(newParkID);
}

Answer 1

on() is asynchronous and returns immediately. The callback will be invoked some time later when the query is complete, and again every time the data changes.

In JavaScript, there is only one thread. There is no need for locking or multithreading techniques. All code and callbacks are invoked on the single thread.

Your code should expect to only use the results of the query from inside the callback that you pass to on() .

If you intend to only query a single time without listening for results that could change over time, you should be using once() instead of on() . once() is also asynchronous, and returns a promise with the results of the query. You should learn how to use these promises, as they are how you primarily handle asynchronous results in JavaScript.