I would like to STOP a slideshow - it just keeps going and going...

[confused and dazed]

Hello internet. I am using the following code and I have not been able to write in a stop function. Nothing I have tried works. Please help. HTML<div class="slides"><img src="photo1.jpg" name="slide" width="180" height="180" /><script type="text/javascript">slideit()</script></div></div> JAVASCRIPTvar image1=new Image()image1.src="photo1.jpg"var image2=new Image()image2.src="photo2.jpg"var image3=new Image()image3.src="photo1.jpg"var step=1function slideit(){if (!document.images)returndocument.images.slide.src=eval("image"+step+".src")if (step<3)step++elsestep=1setTimeout("slideit()",2500)}

[justsomeguy]

You need to save the return value of setTimeout. You can use clearTimeout with that returned value to cancel the timeout.

[confused and dazed]

I was able to make it work (with one minor workaround... the workaround was having to increase my image count to 4 because it would stop after the second picture and I wanted it to stop after the third - so I made image 3 & 4 the same) it worked but I wish I knew why it didn't work with 3 images. NOW I have an issue with starting over with the slide show. I put a button in and used an onclick function but it is not working... any suggestions? HTML<div class="slides"><img src="photo1.jpg" name="slide" width="180" height="180" /><script type="text/javascript">slideit()</script></div></div><input type=button class="sbutton" name=t1 value="Click to restart slideshow" onClick="restart();">JAVASCRIPTvar image1=new Image()image1.src="photo1.jpg"var image2=new Image()image2.src="photo2.jpg"var image3=new Image()image3.src="photo3.jpg"var image4=new Image()image4.src="photo3.jpg"function restart(){timer = setTimeout("slide()",2500)}var timervar step=1function slideit(){if (!document.images)returndocument.images.slide.src=eval("image"+step+".src")if (step<4)step++elsestep=1timer = setTimeout("slideit()",2500)if (step>3)clearTimeout(timer)}

[justsomeguy]

The last if statement tells it to stop. The step variable gets incremented and then it stops the timer.

[confused and dazed]

Thanks. How do I fix the restart function though...

[justsomeguy]

You're not using the right function name. Your browser's error console would show that.

[confused and dazed]

O.K. so I was able to make the following code work IF I only click the button ONCE after the slideshow has ended... but if I just click away at the button it makes the images cycles VERY fast... How do I fix this? var timervar step=1var time=0 function restart(){if (!time){time=1; slideit();}}function slideit(){if (!document.images)returndocument.images.slide.src=eval("image"+step+".src")if (step<4)step++elsestep=1timer = setTimeout("slideit()",2500)if (step>3)clearTimeout(timer)time=0}

[justsomeguy]

The slideit function sets time to 0, so every time that runs then running the restart function again will schedule another timeout.

[confused and dazed]

I have gone back and tried several different things to get the slideshow to start over and my best attempt is what I have above but I still have the issue of every time the button is clicked it starts a new slideit()...

[justsomeguy]

You're not checking if it is already running before starting it again. The timer variable will tell you if there is already a timeout. Your time variable isn't good for checking if it is running because you reset the time variable every time the slideshow runs, it's not keeping track of whether it is running.

[confused and dazed]

You are not Justsomeguy you actually take this seriously and ARE someone. Your approach is one that does not give folks a bunch of code they may or may not understand...I took a lot of extra time to understand what my function was actually doing and in the end I needed to get rid of the time variable all together and make the restart function clear the timeout and reset the step variable. It now works great AND I understand the code I wrote. Thanks.