confusion over setTimeout and clearTimeout

Question

I have a button that changes the background of a div when its rolled over. the background needs to change on a timer so i have used setTimout to execute methods that change

Answer 1

Assign a variable to your setTimeout, which you then pass to clearTimeout to clear it, i.e.

var play_timeout = setTimeout("playV()", 2700);
clearTimeout(play_timeout);

(Note I added quotes around your first setTimeout argument)

Answer 2

You are using setTimeout and clearTimeout wrongly. The setTimeout function returns a handle to the timeout, which is to be passed into clearTimeout to stop it.

var playVTimeout;

...

    playVTimeout = setTimeout(playV, 2700);

....

    clearTImeout(playVTimeout);

Also note that setTimeout(playV(), 2700); will call playV() now and execute its return value 2.7 seconds later. You should pass a function object playV in instead.

Answer 3

When you call setTimeout, it returns a numeric value. You should store this value, because this is what you need for clearTimeout. So keep track of the return value from both setTimeout's (they will be different). And keep track of them in a scope you can access from both functions.

Quick 'n' Dirty Example:

var timer = setTimeout( function(){ alert('hi'); }, 300 );
clearTimeout( timer );

Also, you are calling setTimeout with 'playV()', this is incorrect as it will immediately call that function this way. You can leave the brackets behind, so just setTimeout( playV, 3500 );