Web SQL Database + Javascript loop

Question

I'm trying to figure this out but can't seem to on my own...
I'm playing with Web SQL DBs and I can't get a loop to work properly with it.
I use:

for (var i=0; i<=numberofArticles-1; i++){  
    db.transaction(function (tx) {  
    tx.executeSql('INSERT INTO LOGS (articleID) VALUES (?)',  [i]);
  });
 };

And I get only 5's.. I don't get the incremental i values.
Can anyone suggestion what I'm doing wrong and what I should be thinking about?

Answer 1

It looks like the function is asynchronous, and that by the time tx.executeSql fires, the loop have finished looping and i has been changed several times.

You can solve this with a closure.

for (var i=0; i<=numberofArticles-1; i++){ 
    function (value) { 
        db.transaction(function (tx) {  
        tx.executeSql('INSERT INTO LOGS (articleID) VALUES (?)',  [value]);
      });
    }(i); // <-- CALL the function
 };

Answer 2

Do it the other way around:

<script>
    numberofArticles = 5;
    db = openDatabase("websql", "0.1", "web-sql testing", 10000);
    db.transaction(function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, articleID int)');
    });
    db.transaction(function (tx) {  
        for (var i=0; i<=numberofArticles-1; i++){  
            tx.executeSql('INSERT INTO LOGS (articleID) VALUES (?)',  [i]);
        };
    });
</script>

And the alternative, the proper way with the loop outside which is unnecessary in this case

    for (var i=0; i<=numberofArticles-1; i++){  
      (function(i) {
        db.transaction(function (tx) {  
                tx.executeSql('INSERT INTO LOGS (articleID) VALUES (?)',  [i]);
        });
      })(i);
    };