How to pass parameter to an anonymous function defined in the setTimeout call?

Question

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?

Answer 1

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.

Answer 2

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);
  }
}