javascript using settimeout() with a loop

Question

ive got a table with 8x10 cells.. each sell got an input element with its own id (11, 12, ... , 21,22,23,...) now i want to fill these inputs after and after (lets say 0.5 sec) i just entered some values for testing

        Betrag = new Array();
        Betrag[0] = new Array();
        Betrag[1] = new Array("asd","asd","asd","asd","asd","asd","asd","asd","asd","asd","513.000,00");
        Betrag[2] = new Array("asd","adsd","asd","asd","asd","asd","asd","asd","asd","asd","asd");
        Betrag[3] = new Array("asd","asd","asd","asd","asd","asd","asd","asd","asd","asd","asd");
        Betrag[4] = new Array("asd","uisgui","asd","asd","asd","asd","asd","asd","asd","asd","asd");
        Betrag[5] = new Array("asd","asd","asd","asd","asd","asd","asd","asd","asd","asd","asd");
        Betrag[6] = new Array("asd","asd","asd","asd","asd","asd","asd","asd","asd","asd","asd");
        Betrag[7] = new Array("asd","asd","asd","asd","asd","asd","asd","asd","asd","asd","asd");
        Betrag[8] = new Array("asd","asd","asd","asd","asd","asd","asd","asd","asd","asd","asd");

          for(i=1; i<=8; i++){
            for(k=1; k<=10; k++){
              setTimeout(function schreiben(){document.getElementById(''+i+k+'').value= Betrag[i][k];}, 1000);
              //document.getElementById(''+i+k+'').value= Betrag[i][k];
            }
          }

the compiler says "TypeError: Cannot read property '11' of undefined"

if i would not use the settimeout() function the whole loop is working fine, but with this function ive got this mistake..

have you tried to alert Betrag[1][1] to see what it returns? — Toping, Feb 14 '13 at 12:47
When I run it, `i` becomes 9 and `k` becomes 11. Probably a threading issue. — Bart Friederichs, Feb 14 '13 at 12:49
setTimeout(function schreiben(){alert(Betrag[1][1])}, 1000); is working fine(well ok its an endless loop ^^) getting "asd" in the alert window — Michael Sanker, Feb 14 '13 at 12:50
Do you want to fill all inputs at the same time, or one after another (with a delay between them)? — bfavaretto, Feb 14 '13 at 12:56
@bfavaretto exactly like u said, one after another with a delay — Michael Sanker, Feb 14 '13 at 13:05
See [this answer](http://stackoverflow.com/a/2314195/165154) for an explanation of why this happens, and how to solve it. — Decent Dabbler, Feb 14 '13 at 13:06
possible duplicate of [Javascript infamous Loop problem?](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-problem) — Bergi, Feb 14 '13 at 13:09
I believe you're looking for something like what Anubhav Ranjan suggested (maybe with a few tweaks). All the other answers will result in all fields being filled basically at the same time. — bfavaretto, Feb 14 '13 at 13:24

Anubhav Ranjan · Accepted Answer · 2013-02-14T13:22:10.603

2

You can try something like this:

    var i = 1;
    var k = 1;
    var obj = setInterval( function () {
        document.getElementById(i + '' + k).value= Betrag[i][k];
        if(k <= 10)
           k++;
        else
        {
            k = 1;
            if(i<=8)
                 i++;
            else
                 clearInterval(obj);
        }
    }, 1000);

Here's a running example at http://jsfiddle.net/Ex98V/

edited Feb 14 '13 at 13:22

answered Feb 14 '13 at 13:17

Anubhav Ranjan

1,558
3
18
32

you're setting k to 0, where does this ever happen in the original question? – Frances McMullin Feb 14 '13 at 13:21

score 2 · Answer 2 · answered Feb 14 '13 at 13:19

This should work the way you wanted.

for(i=1; i<=8; i++){
    for(k=1; k<=10; k++){
        (function(i, k){
            setTimeout(function schreiben(){document.getElementById(''+i+k+'').value= Betrag[i][k];}, 1000*k + 10000*i);
            //document.getElementById(''+i+k+'').value= Betrag[i][k];
        })(i, k);
    }
}

To make things a bit clearer, consider refactoring like this :

for(i=1; i<=8; i++){
    for(k=1; k<=10; k++){
        setSchreibTimeout(i, k);
    }
}

function setSchreibTimeout(i, k){
    setTimeout(function schreiben(){document.getElementById(''+i+k+'').value= Betrag[i][k];}, 1000*k + 10000*i);
    //document.getElementById(''+i+k+'').value= Betrag[i][k];
}

Bart Friederichs · Answer 3 · 2013-02-14T13:06:31.317

0

k and i are read after the for loop ended (1 second to be precise). Their values are then 9 and 11, leading to an array overflow problem.

One option to fix it, is to create a function that does the work, and create a fixed string from the k and i variables to call it:

function schreiben(__i, __k) {
   document.getElementById(''+__i+__k+'').value= Betrag[__i][__k];
}

Then call the setTimeout like this:

setTimeout("schreiben("+i+","+k+")", 1000);

Not the most elegant way, but it works.

edited Feb 14 '13 at 13:06

answered Feb 14 '13 at 12:50

Bart Friederichs

33,050
15
95
195

well and how could i solve this problem? sorry im quite new to javascript – Michael Sanker Feb 14 '13 at 12:54
I am trying to make a fix ... :) – Bart Friederichs Feb 14 '13 at 12:56
hmm got a mistake somewhere.. only the function and then the call? – Michael Sanker Feb 14 '13 at 13:10
You have to put the function outside of the loop. Put it before `Betrag = new Array()` for example. – Bart Friederichs Feb 14 '13 at 13:13
alright ure code worked for me, but now the values are coming all together.. wanted it like to fill in the value in the first input, then a break of 50ms befor filling in the next value in the next input field :S – Michael Sanker Feb 14 '13 at 13:17

score 0 · Answer 4 · answered Feb 14 '13 at 12:57

0

Bart Friederichs is right. Not sure why you want to do this that way, but you can declare a couple of vars inside the schreiben function and increment them inside the same screiben function.

answered Feb 14 '13 at 12:57

diegoGarc

41
7

javascript using settimeout() with a loop

4 Answers4

Linked

Related