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, Jan 27 '13 at 01:01
At least I've found now the best tutorial, ever: http://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm — Marcus, Jan 27 '13 at 01:26

score 5 · Answer 1 · answered Jan 26 '13 at 23:50

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 '13 at 23:50

James M

18,506
3
48
56

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? – Marcus Jan 27 '13 at 00:06
1

`setTimeout(changeBackground(...` would call `changeBackground` and pass the result as an argument to `setTimeout`. – James M Jan 27 '13 at 00:07
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 ;) – Marcus Jan 27 '13 at 00:17

jdurango · Answer 2 · 2013-02-13T17:37:23.197

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 '13 at 17:37

answered Jan 26 '13 at 23:55

jdurango

533
1
4
15

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? – Marcus Jan 27 '13 at 00:00
1

that's right here are several ways to do [link](http://www.makemineatriple.com/2007/10/passing-parameters-to-a-function-called-with-settimeout) – jdurango Jan 27 '13 at 00:03
@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 – Marcus Jan 27 '13 at 00:09
@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". – elclanrs Jan 27 '13 at 00:17
This link is not so bad, either: http://stackoverflow.com/questions/555726/a-good-javascript-api-reference-documentation-related-to-browsers-and-dom – Marcus Jan 27 '13 at 00:41

Marcus · Accepted Answer · 2013-01-31T19:31:16.573

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 '13 at 19:31

answered Jan 27 '13 at 01:55

Marcus

1,222
2
13
22

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). – Marcus Jan 27 '13 at 02:11

Function setTimeout throws error

3 Answers3