How to pass a value from for loop to settimeout function

Question

Below is my javascript code:

function showBranch_init() {
    var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
    for(a=0;a<id_arr.length;a++){
        timeoutID = window.setTimeout(function() {

            showBranch(id_arr[a]); // <-- Right here

        }, 500);
    }
}

How can I pass the value of id_arr[a] to showBranch funcion?

Currently the above code returns null for id_arr[a]

It's not correct, `a == id_arr.length - 1` for all timeouts. — RobH, Feb 12 '14 at 09:34
But what's the reason for the timeouts anyways? They will be executed all at the same time. — Felix Kling, Feb 12 '14 at 09:39
@FelixKling yeah I just found that out when I used the answer below. I was expecting what will happen is that there will be a delay of 500ms for each execution but it all ran the same time :| — Jo E., Feb 12 '14 at 09:40
For that problem, please see [Why does everything display at once, using setTimeout in Javascript?](http://stackoverflow.com/q/18646908/218196). — Felix Kling, Feb 12 '14 at 09:42

fast · Accepted Answer · 2014-02-12T09:43:35.770

6

by introducing a new scope (by a function call) for each iteration step you can pass the argument like this:

function showBranch_init() {
    var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
    for(a=0;a<id_arr.length;a++){
        (function(i) {
            timeoutID = window.setTimeout(function() {
                showBranch(id_arr[i]); // <-- Right here
            }, 500*i);
         })(a);
    }
}

Updated to fullfill the 2nd req: showBranch() in 500ms steps..

edited Feb 12 '14 at 09:43

answered Feb 12 '14 at 09:36

fast

885
7
15

2

Please don't use the term "closure" to describe this kind of solution. The callback passed to `setTimeout` is *already* a closure. The actual solution is to create a new scope by executing a function, not by creating yet another closure. Whether the executed function is a closure or not doesn't have anything to do with it. – Felix Kling Feb 12 '14 at 09:38
2

+1 but define the function outside the for loop, because it creates one **each time** you iterate – axelduch Feb 12 '14 at 09:39

score 0 · Answer 2 · answered Feb 12 '14 at 09:42

http://jsfiddle.net/HXc4d/

function showBranch_init() {
    var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];
    for(a=0;a<id_arr.length;a++){
        timeoutID = window.setTimeout(function(idvalue) {
            showBranch(idvalue);
        }(id_arr[a]), 500);
    }
}

EDIT: The problem with your solution is the fact that when the code executes (timeout) id_arr no longer exists in the executing scope, thus leading to undefined result. When sending the variable as an argument it "stays" with the funciton itself, regardless of the executing scope.

Could you please **explain** your solution, instead of just posting code? What's wrong with the OP's code? — Felix Kling, Feb 12 '14 at 09:43

score -1 · Answer 3 · answered Feb 12 '14 at 09:38

function showBranch_init() {
var id_arr = ["jdc_b1","jdc_b2","jdc_b3","jdc_b4"];

    timeoutID = window.setTimeout(function() {
      for(a=0;a<id_arr.length;a++){
        showBranch(id_arr[a]); // <-- Right here
      }
    }, 500);
}

can you do that?? O_O

How to pass a value from for loop to settimeout function

3 Answers3