Here is my code:

function addRcd2(timeOut){  
  for(var c=0; c less 5; c++){
    var rcdi = "rcd_"+c+"";
    setTimeout(function(){
      $('.tbl1 tbody').append(rcdi);
    },timeOut*c);
  }
}

The output of this code is a table which rows have the same text rcd_5.

My goal is to have a table rows have different records rcd_1, …, rcd_5.

Any ideas?

Here is my code:

function addRcd2(timeOut){  
  for(var c=0; c less 5; c++){
    var rcdi = "rcd_"+c+"";
    setTimeout(function(){
      $('.tbl1 tbody').append(rcdi);
    },timeOut*c);
  }
}

The output of this code is a table which rows have the same text rcd_5.

My goal is to have a table rows have different records rcd_1, …, rcd_5.

Any ideas?

• javascript
• jquery

Share Improve this question Follow edited Jun 18, 2011 at 12:50 insumity 5,47188 gold badges3838 silver badges6565 bronze badges asked Jun 18, 2011 at 12:49 antonjsantonjs 14.3k1515 gold badges7070 silver badges9191 bronze badges 2

• 1 That code should work. I don't see anything wrong with it. – Kon Commented Jun 18, 2011 at 12:51
• 2 No it wont, it's a mon closure mistake – Halcyon Commented Jun 18, 2011 at 12:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Typical creating a function in a loop problem. All closures you pass to setTimeout have a reference to the same rcdi variable. Defining the variable inside the loop is the same as defining it outside:

var rcdi;
for(var c=0; c < 5; c++){
    rcdi = "rcd_"+c+"";
    // ...
}

which makes it a bit more apparent that you only deal with one variable here.

You have to introduce a new scope, which in JavaScript can only be achieved through functions:

function getCallback(val) {
    return function(){
      $('.tbl1 tbody').append(val);
    };
}

function addRcd2(timeOut){  
  for(var c=0; c < 5; c++){
    setTimeout(getCallback("rcd_"+c),timeOut*c);
  }
}

As you can see in other answers, you can also use immediate functions. Use what you find more readable.

function addRcd2(timeOut){  
  for(var c=0; c less 5; c++){
    var rcdi = "rcd_"+c+"";
    setTimeout((function(x) {
      return function(){
        $('.tbl1 tbody').append(x);
      };
    })(rcdi),timeOut*c);
  }
}