Only the last run in a for loop in Javascript works

Question

Here is a for loop written by Javascript. It is trying to apply queries for websql.

for (var i = 0; i < 10; i++){
    db.transaction(function (tx){
    tx.executeSql('INSERT INTO ProjSetsT (ProjID) VALUES (?);', [i]);
    });
}

The attempt is obvious, I tried to add values "0, 1, 2, ... 9" into column ProjID in table ProjSetsT. It does not work. I only got the last element, i.e. "9" inserted, but not the first eight numbers.

Is there any syntax mistakes?

Syntax mistakes would prevent it from running outright... WebSQL is an asynchronous API, you can't expect it to catch the right values this way. See [Web SQL Database + Javascript loop](http://stackoverflow.com/questions/4825455/web-sql-database-javascript-loop). Also, running multiple queries in one transaction is faster and actually guarantees the insertion order. Running each one in a separate transaction is a slow free-for-all with random ordering. — DCoder, Sep 25 '12 at 15:38
Why not make one query? Where the value binded is a string built from the values in the for loop. — Austin Brunkhorst, Sep 25 '12 at 15:39

score 4 · Accepted Answer · answered Sep 25 '12 at 15:38

4

I think db.transaction might run asynchronously so that might be messing it up for you. Have you tried to move your for loop inside the transaction?

db.transaction(function (tx){
    for (var i = 0; i < 10; i++){
        tx.executeSql('INSERT INTO ProjSetsT (ProjID) VALUES (?);', [i]);
    }
});

answered Sep 25 '12 at 15:38

Neil Kennedy

593
1
5
12

You are right. And I think this is the most straight forward method to do it though other people's advices all work. That's why I put yours as the answer. – Mengfei Murphy Sep 26 '12 at 15:43

score 2 · Answer 2 · answered Sep 25 '12 at 15:40

Every function you pass as an argument shares the same reference to i, so every new function object's i value gets incremented. given the async context, i will have reached its max size before the first function you create inside the loop gets called

You can fix it using a closure:

for (var i = 0; i < 10; i++)
{
    db.transaction((function(privateI)
    {//privateI is unique for every function object
        return function (tx)
        {
            tx.executeSql('INSERT INTO ProjSetsT (ProjID) VALUES (?);', [privateI]);
        };
    })(i));//pass current value here
}

score 1 · Answer 3 · answered Sep 25 '12 at 15:38

You have several functions referencing the same i variable, which ends up as 10.

You need a new varible scope for each function.

for (var i = 0; i < 10; i++){
    db.transaction(makeHandler(i));
}

function makeHandler(j) {
    return function (tx){
        tx.executeSql('INSERT INTO ProjSetsT (ProjID) VALUES (?);', [j]);
    };
}

Now i is passed to makeHandler, which receives it as j.

Every time makeHandler is called, it returns a function that references its own local j varaible.

Only the last run in a for loop in Javascript works

3 Answers3