Why is my function excuted much later

Why is my function excuted much later

Hi everybody,


this is my first question here, so please be gentle...

I'm just building my first web app using jQTouch (which itself is a jQuery extension, if I got it right).

So, I have quite a lot of code up and running, doing exactly the things I want them to do BUT...
I have created one object "einstellungenObject" with a function called "getEinstellungen", which is supposed to load the user's configuration from a SQLite table. That is working but this function is executed in a way I don't understand. Let me show you what I mean:

This is the first function that is executed automatically upon loading the web app. Notice the call to "einstellungen.getEinstellungen()" within.
  1. $(document).ready(function() {
        // Datenbank anlegen und öffnen
        var shortName = 'myFahrtenbuch';
        var version = '1.0';
        var displayName = 'myFahrtenbuch 1.0';
        var maxSize = 65536;
        db = openDatabase(shortName, version, displayName, maxSize);
       
        datenbankAnlegen();
        datenbankStandardwerte();
       
        einstellungen.getEinstellungen();
       
        // Werte aus Datenbank laden
        console.log(tmp++ + ': Aktualisiere Listen...');
        fahrerliste_aktualisieren();
        fahrzeugliste_aktualisieren();
        kategorieliste_aktualisieren();
        vorlagenliste_aktualisieren();
       
        // TODO: Einstellungen aus Datenbank laden
        hinweise(einstellungen.hinweise);
       
        console.log(tmp++ + ': Lade Sprache: ' + einstellungen.sprache);
        sprachewechseln(einstellungen.sprache);
    });
























The functions "*_aktualisierien()" refresh some lists within my web app, they work as intended.


This is the function "getEinstellungen()" from "einstellungenObject".
  1. einstellungenObject.prototype.getEinstellungen = function () {
        console.log(tmp++ +': Lade Einstellungen...');
       
        // Werte aus Datenbank in Rückgabe-Objekt speichern
        db.transaction(
            function(transaction) {
                transaction.executeSql(
                    'SELECT value FROM einstellungen ORDER BY key;',
                    [],
                    function(transaction, result) {
                        // Einzelne VALUES in Rückgabe.Objekt speichern
                        this.sprache = result.rows.item(0).value;
                       
                        console.log(tmp++ + ':    Eingestellte Sprache: ' + this.sprache);
                    }   
                );
            }
        );
    }

















So when I execute my web app I get the following debug output in console (tested in Chrome and iPhone Safari):
  1. 1: Lade Einstellungen...
    myFahrtenbuch.js:322: Aktualisiere Listen...
    myFahrtenbuch.js:4553: Lade Fahrer...
    myFahrtenbuch.js:5584: Lade Fahrzeuge...
    myFahrtenbuch.js:6745: Lade Kategorien...
    myFahrtenbuch.js:8296: Lade Vorlagen...
    myFahrtenbuch.js:417: Lade Sprache: undefined
    myFahrtenbuch.js:889Fehler: constraint failed
    myFahrtenbuch.js:9408: Eingestellte Sprache: de
And this is what I don't understand! Line 1 comes from within "einstellungen.getEinstellungen()", which is correct. But afterwards, my web app refreshes the various lists (lines 2 to 6) instead of further executing my first function. This leads to the error found in line 7; I depend on a filled property of "einstellungen", which is empty at that time because the function, which is supposed to fill it is seemingly pausing. Only at line 8 is that value being filled.

So, why is JavaScript executing the first few lines of "einstellungen.getEinstellungen()", then some other functions and then again the rest of that function? I really don't get it...


I'm grateful for every bit of help and can (of course) provide further code and info if needed...


Cheers,
janschmitte