Understanding Javascript Asynchronous Calls

Question

I posted most of the same code in another question, but I have a different question here - how should I understand Javascript Asynchronous code?

function getUserStatus() {

    var status;

    function querySuccess(tx, results) {
        var len = results.rows.length;
        var row = results.rows.item(0);
        console.log(row['id']);
        status = {
            question: row['id']
        };
    }

    function errorCB(err) {
        console.log(err);
    }

   db.transaction(function(tx) {
        tx.executeSql('SELECT id FROM calculator ORDER by id ASC LIMIT 1', [], querySuccess, errorCB);
    });
    querySuccess();
    console.log(status);
    return status;
}

I understand that my code is executing before the variable status is being defined - but how do I stop processing until status is defined? I do not want this procedure to be asynchronous - if nothing is delivered from the database, then I don't want the operation to continue.

I am under the impression that I need to call querySuccess(), but what arguments would I pass to it?

I'm relatively new to Javascript and I haven't encountered this concept before, and I'm somewhat confused by how it works and how I can get my code to execute how I want.

It's always asynchronous. You don't need to call querySuccess yourself, it gets called automatically when the query finishes. Put the console.log() call inside querySuccess(). — Barmar
– Barmar, Commented Feb 12, 2015 at 2:43
Everything that depends on the query completing successfully should be in the querySuccess() function. You can't return status from the function. — Barmar
– Barmar, Commented Feb 12, 2015 at 2:46

user3886234 · Accepted Answer · 2015-02-12 02:55:25Z

When I was first learning asynchronous programming, I found it easier to pass anonymous functions as callbacks:

function getUserStatus(returnCallback) {
    db.transaction(function(tx) {
        tx.executeSql('SELECT id FROM calculator ORDER by id ASC LIMIT 1', [], 
            function(tx, results) { //querySuccess callback
                var len = results.rows.length;
                var row = results.rows.item(0);
                console.log(row['id']);
                var status = {question: row['id']};
                console.log(status);
                returnCallback(status);
            }, 

            function(err) { //error callback
               console.log(err);
               returnCallback(err);         
            });
    });
}

I rewrote and added a few things to your code. Hopefully that helps :)

Unfortunately, I don't have time right now to go in detail and explain how all of this is working. If someone else wants to edit this answer to do just that, go right ahead.

Good luck OP, learning to use async techniques is difficult at first, but really easy once you can wrap your head around it :)

I had to work on this for quite a bit of time, but I finally understood it and got the callback correct with some additional reading. Thanks for the help.

Varun verma · Accepted Answer · 2019-01-15 08:48:42Z

We can do this with the help of async await which is more easier and clear way to write async code. async function getUserStatus() { var status; db.transaction(function (tx) { try { var result = await tx.executeSql('SELECT id FROM calculator ORDER by id ASC LIMIT 1'); var len = results.rows.length; var row = results.rows.item(0); console.log(row['id']); status = { question: row['id'] }; } catch (error) { console.log(err); } } }); }

I hope this will help.

Collectives™ on Stack Overflow

Understanding Javascript Asynchronous Calls

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related