Function setTimeout throws error

Question

I've a problem with the setTimeout function. This is the code:

1   var urlArray = ["pic1.gif"; "pic2.gif"]

2   function changeBackground(elementId, backgroundImage){
3       document.getElementById(elementId).style.background="url("+backgroundImage+")";
4   }

5   function mouseover_1(elementId){
6           changeBackground(elementId,urlArray[0]);
7           setTimeout("changeBackground(elementId,urlArray[1])",300);
8   }

And in the body:

<area shape="rect" coords="0,0,95,91" onMouseOver="mouseover_1('navigator_1')">

Now, line 6 in the Javascript code works like a charm (the picture changes!), but line 7 doesn't work (no picture change). This is the error from debugging in Firefox:

elementId is not defined  line: 7

But since line 6 works, I really don't know what the problem could be. Do you have any suggestions?

Since the function setTimeout is not even in the "Standard ECMA-262 ECMAScript Language Specification (ECMA)", from now on I'll call Javascript inofficially "chaos script". — Marcus
– Marcus, Commented Jan 27, 2013 at 1:01
At least I've found now the best tutorial, ever: tutorialspoint.com/javascript/javascript_builtin_functions.htm — Marcus
– Marcus, Commented Jan 27, 2013 at 1:26

James M · Accepted Answer · 2013-01-26 23:50:14Z

5

If you pass a string to setTimeout, the string is not evaluated in the context of your function (so elementId does not exist).

You should use a closure instead:

setTimeout(function()
{
    changeBackground(elementId, urlArray[1]);

}, 300);

answered Jan 26, 2013 at 23:50

James M

16.8k3 gold badges50 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marcus Over a year ago

Strange, but the hole setTimeout function doesn't make sense to me, I would like to write setTimeout(changeBackground(elementId,urlArray[1]),300), but this also didn't work. Do you have an explanation for this behaviour why other solutions won't work?

James M Over a year ago

setTimeout(changeBackground(... would call changeBackground and pass the result as an argument to setTimeout.

Marcus Over a year ago

Hmmmm, that seems very strange to me, because "setTimeout" should only do a pause and then call the argument passed. Still I'm probably going with your solution since IE needs it. Thx. (Ah, I got it: setTimeout(300,changeBackground(elementId,urlArray[1])) would be the perfect way to do it, but sadely this isn't possible ;)

jdurango · Accepted Answer · 2013-02-13 17:37:23Z

4

You can try this form to pass parameters to setTimeout function:

setTimeout(changeBackground, 300, elementId, urlArray[1]);

and here you can see other forms to do the same:

Passing parameters to a function called with setTimeout

edited Feb 13, 2013 at 17:37

answered Jan 26, 2013 at 23:55

jdurango

5431 gold badge4 silver badges15 bronze badges

5 Comments

Marcus Over a year ago

This works great, thanks! Do you know a website (some kind of "API") where I can find such cool functions? Or did you find it just by trial & error?

jdurango Over a year ago

that's right here are several ways to do link

Marcus Over a year ago

@elclanrs: I'm rather looking for a simple library than those huge tutorials. A simple list of all possible functions and their implementations. Tutorials are often too limited, I know also a few. ;D

elclanrs Over a year ago

@Marcus: MDN is not a tutorial is a reference for JavaScript. Think of it as the free JS Bible from Mozilla. It's one of the best resources for learning JS "the right way".

Marcus Over a year ago

This link is not so bad, either: stackoverflow.com/questions/555726/…

Marcus · Accepted Answer · 2013-01-31 19:31:16Z

0

After reading this: http://www.makemineatriple.com/2007/10/passing-parameters-to-a-function-called-with-settimeout

...I learned that a "parameter = null" is needed and finally implemented a closure:

setTimeout(function(){changeBackground(elementId,urlArray[1]);
    parameter = null},300);

But the function setTimeout() must always be wrapped into a setInterval()-thread, otherwise it won't run smooth.

edited Jan 31, 2013 at 19:31

answered Jan 27, 2013 at 1:55

Marcus

1,2422 gold badges14 silver badges23 bronze badges

1 Comment

Marcus Over a year ago

parameter = null is needed due to garbage collection problems in IE, you'll find more information in the first commentary from the link above (provided by jdurango).

Collectives™ on Stack Overflow

Function setTimeout throws error

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related