Question

I’m having a problem with some code not performing as expected, I should probably explain what it’s doing first:

• On document load function selectForLists is querying a sqlite DB
  containing football scores, specifically a table called matches, then
  calling function renderLists.

• RenderLists puts the playing team into a sorted list with duplicates
  removed.

• Then for each entry in this list of teams function latestTest is
  being called, which selects all rows from the match table where that
  team is playing and calls latestTest2.

• LatestTest2 counts the number of rows with that team playing and
  outputs some code to the inserted div.

• Once that has been completed for every team it should revert to
  finish the renderLists function and call the loaded function, except
  it doesnt and I have to add a delay to calling this function because
  it doesnt happen last.

I’m hoping someone can tell me whats wrong here, why the loaded function isn’t called after all the above is completed? Also if anyone has any tips for achieving the same outcome with more efficient code I would like that very much.

Apologies for this long post, I’m sure many will find the code terrible and I know there are too many functions and probably many better ways of doing this but its been a few years since working with javascript in uni and I’m struggling with it and sqlite.

The code is below or at http://pastebin.com/7AxXzHNB thanks

function selectForLists() { //called on (document).ready
    db.transaction(function(tx) {
        tx.executeSql('SELECT * FROM matches', [], renderLists);
    });
}

function renderLists(tx, rs) {
    var playingList = new Array();
    for (var i = 0; i < rs.rows.length; i++) {
        playingList.push(rs.rows.item(i)['playing']);
    }

    playingListSort = playingList.sort();
    var playingListFinal = new Array();

    playingListSort.forEach(function(value) {
        if (playingListFinal.indexOf(value) == -1) {
            playingListFinal.push(value);
        }
    });

    for (var c = 0; c < playingListFinal.length; c++) {
        latestTest(playingListFinal[c]);
    }

    loaded(); //not running last in the function
    //setTimeout(loaded,1000);
    /////Using a delay because it doesn't run after the above has completed
}

function latestTest(team) {
    db.transaction(function(tx) {
        tx.executeSql('SELECT * FROM matches WHERE playing="' + team + '"', [], latestTest2);
    });
}

function latestTest2(tx, rs) {
    counted = rs.rows.length;
    var theFunction = rs.rows.item(0)['playing'];

    $('#inserted').append('<li onclick="onToDate(\'' + theFunction + '\')"><img width="30px"        height="25px" id="popupContactClose" src="style/soccer.png"><div id="popupContactClose2">' + counted + '</div></img>' + rs.rows.item(0)['playing'] + '</li>');
}

Answer 1

The latestTest function calls another executeSQL function with its own callback. That callback will be executed when the SQL has finished, which will be at an arbitrary time.

The renderLists function will continue execution (including calling the loaded function) normally, quite apart from anything having to do with the callbacks in latestTests being executed.

Your mistake is thinking that loaded will “wait” to be executed–you will still have pending callbacks from the DB code in latestTest.