Confused about setTimeout function.

[Rene]

Hi, first things first, please take a second to check out the page on the
link below.

http://bookofjavascript.com/Chapter13/Assignment.html

In this page, you are supposed to click on the "Make Happiness Bounce"
button to make the smiley face start bouncing and then you can click the
"Stop that Smiley!" button to stop it.

What I find odd about this example is that if I click the "Make Happiness
Bounce" button 5 times the bouncing speeds up and then if I click on the
"Stop that Smiley!" button 5 times the bouncing slow down and stop! I think
I know why it speeds up but what I don't understand is why it slows down.

How is this happening? According to me, the "clearTimeout" call does not do
anything special to handle things this way. All it does is the following:
"clearTimeout(theTimeOut)", where the "theTimeOut" variable is just an
integer!

If you ask me, the "clearTimeout(theTimeOut)" call should *only* be able
stop the *last* "setTimeout" call but it shouldn't be able to stop previous
calls to "setTimeout" calls

The reason I say this is because previous references to "setTimeout" calls
where stored on the "theTimeOut" variable but this variable is overridden
every time a new call to the "setTimeout" occurs. So how can the
"clearTimeout(theTimeOut)" know the history of the values that were stored
on the "theTimeOut" variable to be able to stop previous "setTimeout" calls?

I am really confused with this behavior, any help explaining the reason for
this behavior is greatly appreciated.

Thanks you.

 

[Peter Michaux]

Hi Rene,

Hi, first things first, please take a second to check out the page on the
link below.

http://bookofjavascript.com/Chapter13/Assignment.html

In this page, you are supposed to click on the "Make Happiness Bounce"
button to make the smiley face start bouncing and then you can click the
"Stop that Smiley!" button to stop it.

What I find odd about this example is that if I click the "Make Happiness
Bounce" button 5 times the bouncing speeds up and then if I click on the
"Stop that Smiley!" button 5 times the bouncing slow down and stop! I think
I know why it speeds up but what I don't understand is why it slows down.

How is this happening?

This took me some puzzling also. Very strange scripting but
interesting and it does make sense.

When you press start the first time you set up a recursive call to
move(). Every time move() runs it resets theTimeOut.

When you press start the second time you set up another recursive call
to move(). Every time this loop of move() calls runs it also resets
theTimeOut.

When you press stop the first time you stop one of the above two
loops...not necessarily the second loop! You stop the loop that last
set theTimeOut. If you could press the stop button really quickly a
second time then what you are expecting would happen: the other loop
would keep running because the integer stored in theTimeOut hasn't
changed.

So after the first stop click, the other loop of move() executions
keeps running and keeps resetting theTimeOut to new integer values.
When you click the stop button after this has happened then this other
loop stops also and the image stops moving.

The key issue here is theTimeOut is being reset many, many times and
not just twice. Perhaps you were thinking it was set just twice like
it would be if this solution was created with setInterval(). This
thinking caught me for a moment.

I hope that helps.

Peter

 

[Rene]

Thanks Randy, but what I really wanted to know is why the example is
actually working!



Like I said on my original post, the code should *only* be able to clear the
*last* "setTimeout", how is it possible that the code is able to clear
previous "setTimeout" calls?? What's going on behind the scenes??



Thank you.

 

[Tim]

Aaaah, I am such an idiot, half way from reading your response and
everything started clicking! I can't believe I didn't catch that!

I can finally move on to chapter 14 in peace!

Thanks a lot!