How can I pass a parameter to a setTimeout() callback?

How can I pass a parameter to a setTimeout() callback?

I have some JavaScript code that looks like:
function statechangedPostQuestion()
{
//alert(“statechangedPostQuestion”);
if (xmlhttp.readyState==4)
{
var topicId = xmlhttp.responseText;
setTimeout(“postinsql(topicId)”,4000);
}
}

function postinsql(topicId)
{
//alert(topicId);
}

I get a error that topicId is not defined
Everything was working before i used the setTimeout() function.
I want my postinsql(topicId) function to be called after some time.
What should i do?

Solutions/Answers:

Solution 1:

setTimeout(function() {
    postinsql(topicId);
}, 4000)

You need to feed an anonymous function as a parameter instead of a string, the latter method shouldn’t even work per the ECMAScript specification but browsers are just lenient. This is the proper solution, don’t ever rely on passing a string as a ‘function’ when using setTimeout() or setInterval(), it’s slower because it has to be evaluated and it just isn’t right.

UPDATE:

As Hobblin said in his comments to the question, now you can pass arguments to the function inside setTimeout using Function.prototype.bind()

Example:

setTimeout(postinsql.bind(null, topicId), 4000);

Solution 2:

In modern browsers, the “setTimeout” receives a third parameter that is sent as parameter to the internal function at the end of the timer.

Example:

var hello = "Hello World";
setTimeout(alert, 1000, hello);

More details:

Solution 3:

After doing some research and testing, the only correct implementation is:

setTimeout(yourFunctionReference, 4000, param1, param2, paramN);

setTimeout will pass all extra parameters to your function so they can be processed there.

The anonymous function can work for very basic stuff, but within instance of a object where you have to use “this”, there is no way to make it work.
Any anonymous function will change “this” to point to window, so you will lose your object reference.

Solution 4:

This is a very old question with an already “correct” answer but I thought I’d mention another approach that nobody has mentioned here. This is copied and pasted from the excellent underscore library:

_.delay = function(func, wait) {
  var args = slice.call(arguments, 2);
  return setTimeout(function(){ return func.apply(null, args); }, wait);
};

You can pass as many arguments as you’d like to the function called by setTimeout and as an added bonus (well, usually a bonus) the value of the arguments passed to your function are frozen when you call setTimeout, so if they change value at some point between when setTimeout() is called and when it times out, well… that’s not so hideously frustrating anymore 🙂

Here’s a fiddle where you can see what I mean.

Solution 5:

I recently came across the unique situation of needing to use a setTimeout in a loop. Understanding this can help you understand how to pass parameters to setTimeout.

Method 1

Use forEach and Object.keys, as per Sukima’s suggestion:

var testObject = {
    prop1: 'test1',
    prop2: 'test2',
    prop3: 'test3'
};

Object.keys(testObject).forEach(function(propertyName, i) {
    setTimeout(function() {
        console.log(testObject[propertyName]);
    }, i * 1000);
});

I recommend this method.

Method 2

Use bind:

var i = 0;
for (var propertyName in testObject) {
    setTimeout(function(propertyName) {
        console.log(testObject[propertyName]);
    }.bind(this, propertyName), i++ * 1000);
}

JSFiddle: http://jsfiddle.net/MsBkW/

Method 3

Or if you can’t use forEach or bind, use an IIFE:

var i = 0;
for (var propertyName in testObject) {
    setTimeout((function(propertyName) {
        return function() {
            console.log(testObject[propertyName]);
        };
    })(propertyName), i++ * 1000);
}

Method 4

But if you don’t care about IE < 10, then you could use Fabio’s suggestion:

var i = 0;
for (var propertyName in testObject) {
    setTimeout(function(propertyName) {
        console.log(testObject[propertyName]);
    }, i++ * 1000, propertyName);
}

Method 5 (ES6)

Use a block scoped variable:

let i = 0;
for (let propertyName in testObject) {
    setTimeout(() => console.log(testObject[propertyName]), i++ * 1000);
}

Though I would still recommend using Object.keys with forEach in ES6.

Solution 6:

Hobblin already commented this on the question, but it should be an answer really!

Using Function.prototype.bind() is the cleanest and most flexible way to do this (with the added bonus of being able to set the this context):

setTimeout(postinsql.bind(null, topicId), 4000);

For more information see these MDN links:
https://developer.mozilla.org/en/docs/DOM/window.setTimeout#highlighter_547041
https://developer.mozilla.org/en/docs/JavaScript/Reference/Global_Objects/Function/bind#With_setTimeout