Passing parameters to a function called with setTimeout

Closures are arguably the great secret of Javascript: the way variable scope stacks get frozen at the point of closure (and hence variables persist within the closure) is quite subtle and catches most out, including me!

Be warned that IEx has a garbage-collector subtlety, though; I think that if you reference a DOM variable in a Javascript closure, then the collection mechanism gets confused and it doesn’t get trashed at the end of the request: eventually this becomes a memory leak. I think it’s because DOM variables and internal JS variables get collected by two different collectors, and they don’t communicate properly about what’s no longer being used.

I think you can fix this by setting the variable to null:

setTimeout(function(){myFunction(parameter); parameter = null},myTimeout);

This explicitly sets the garbage collection in motion.

I was pulling my hair out. The books seem to gloss over this like I should have known it and then go on to tell me some obscure thing I’ll never use. I cannot thank you enough!

Great tip!! I’ve been looking for this solution for a while now. Thanks!

This was very helpful! I was looking for this solution everywhere!

Thanks

great reminder … closure is the answer …

Thank you!

Not only did you give a lucid explanation of this setTimeout dilemma, you cleared up the ‘closure’ concept for me. All in 100 words or less.

I have several other ‘tutorials’ and they all dove headfirst into ‘here, look at this code’ and never got around to the heart of the matter.

Thank you. Cannot express my feeling in words. I was getting no where since last 2 days and this blog made my day.
Thank you. You Rock!!

Thanks a lot! I’ve been googeling for hours for this solution.

[…] (thanks makemineatriple) […]

Well done buddy!
You ARE the man - thanks. Victor.

Great help! Thanks a lot!! Searched a solution for a whole day..Finally got it :)

@Rick,

Maybe I’ve misread something, but the following code doesn’t work, while the commented-out line, which uses the closure, is fine:

$(document).ready(function() {
var p1 = 'one';
var p2 = 'two';
//setTimeout(function(){test(p1,p2);},400);
setTimeout("test("+p1+")", 400);
});

function test(param,param2) {
alert(param);
alert(param2);
}

I’d suggest that, any other considerations aside, the closure approach is more manageable syntax, particularly where several parameters are needed.

Bryan

You are top result for this google query:

javascript pass parameters to setTimeout

… THANK YOU for being top result!

Funny enough I’d done what you did but wasnt sure why it was working, and was looking for the “proper” way to do it… I guess this was the proper way!

@23 Bryan,

That code is never going to work because you have not written it correctly.

Look at setTimeout(“test(“+p1+”)”, 400);
expand it yourself and you get

setTimeout( test(one), 400);

test(one) is not valid syntax - unless one is defined as a variable - which it is not.

You probably meant setTimeout(“test(’ “+p1+” ‘)”, 400);
Where there are some extra quotes to yield test(‘one’).

Even then, it probably doesn’t do what you expect.

Thank you this helped solve a three day problem. As a note if you need to use the keyword ‘this’ it still doesnt work in the closure, you have to create a variable reference to ‘this’ (eg. var myThis = this;). Thanks again

Thanks this was a great help.

You saved my life.. :)

Awesome! saved a lot of time and effort here :)

This was very very very helpful. just spend 4 hours trying to figure out how to pass parameters to function in seTimeout.
Thank You!

Tooooo much thanks my friend!!!!! i have lost an hour on this!!

Many thanks for posting this, wish I’d known it years ago.

YES! Fuck yes!

Thanks after 3 forum posts i finally got it on first result on serp… i really should have done that earlier.. its kind of annoying how the variables just freeze with that function..

And by “I’m”, I mean “It’s”!

If i were read this before i would save a couple of hours of testing around!!

Lotsa thanks from sunny spain