why my function call later, after display this alert and display first document ready alert.....?

Question

in This Code First Display abc Alert And then My Function Call And Display In function Alert WHy..?but In this Code i call my function first so why abc alert display first..?

    function GetDefaultChanter(){
        db.transaction(function (tx){
            tx.executeSql('SELECT Value FROM Setting where Key = "DefaultChanter";',[],querySuccessDefaultChanter);},                         
            errorCB);
    }

    function querySuccessDefaultChanter(tx,result){
        $.each(result.rows,function(index){
            var row = result.rows.item(index);
            var chantervalue = row["Value"];
            alert(chantervalue);
            $('#defaultchanterid').val("chantervalue");
        });
    }

$(document).ready(function (e) {

                        GetDefaultChanter();
                        var abc = $('#defaultchanterid').val();
                        alert(abc);

});

score 0 · Answer 1 · answered Mar 09 '17 at 07:28

Based on your setup it appears your do.transaction method is asynchronous. This means that when you call GetDefaultChanter the call to do.transaction doesn't block GetDefaultChanter from completing. Then the next lines are executed including your alert while do.transaction essentially works in the background. Whenever that method completes its work it will invoke your callback method and that can happen at any time.

score 0 · Answer 2 · edited May 23 '17 at 12:10

The alert(abc) fires first because executeSql() is asynchronous and therefore anything you want to run after the query completes, you'll need to put that code or call it from the callback querySuccessDefaultChanter() function.

Asynchronous vs Synchronous, what does it really mean?

Side note: Web SQL Database is deprecated and no longer maintained. I recommend switching to something else for new code such as IndexedDB.

score 0 · Accepted Answer · answered Mar 09 '17 at 07:28

DB transactions in javascript are not blocking. They are executed asynchronously. Since db.transaction is not complete before alert(abc) is executed, alert prompt is shown. You need to show alert in success callback as follows

function GetDefaultChanter(){
    db.transaction(function (tx){
        tx.executeSql('SELECT Value FROM Setting where Key = "DefaultChanter";',[],querySuccessDefaultChanter);},                         
        errorCB);
}

function querySuccessDefaultChanter(tx,result){
    $.each(result.rows,function(index){
        var row = result.rows.item(index);
        var chantervalue = row["Value"];
        alert(chantervalue);
        $('#defaultchanterid').val("chantervalue");

        //alert handled in callback
            var abc = $('#defaultchanterid').val();
                alert(abc);
        }
    });

$(document).ready(function (e) {

                        GetDefaultChanter();

});

https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html#//apple_ref/doc/uid/TP40007256-CH3-SW4

score 0 · Answer 4 · answered Mar 09 '17 at 07:33

similarly i tired like this

   function GetDefaultChanter(){
        db.transaction(function (tx){
            tx.executeSql('SELECT Value FROM Setting where Key = "DefaultChanter";',[],querySuccessDefaultChanter);},                         
            errorCB);
    }

    function querySuccessDefaultChanter(tx,result){
        $.each(result.rows,function(index){
            var row = result.rows.item(index);
            var chantervalue = row["Value"];
            alert(chantervalue);
            $('#defaultchanterid').val("chantervalue");
        });
    }

$(document).ready(function (e) {

                        GetDefaultChanter();
                        var abc = $('#defaultchanterid').val();
                        alert(abc);

});

but here i am using only alert and console.log

http://jsfiddle.net/o2gxgz9r/3841/

why my function call later, after display this alert and display first document ready alert.....?

4 Answers4