Question

I have two buttons play and stop. When I click play I want the images to run like a slideshow.
I am using setTimeout() and having it wait 5 seconds before running.

When play is clicked, the code runs fine , waiting for 5 seconds and then displaying the next image, but when I click stop , and then click play again, it stops waiting the correct interval.Instead of waiting for 5 seconds before running, it waits for one second for the first two images and then 5 seconds for the next, again for one second for the next two and so on..

Why is it running correctly the first time and then breaking on retry?

Code:

var stop = false;
playClickfunction() {
    showImages();
}
showImages() {
    //code to display image for all no of images
    //and user can stop on any no of image..
    if(!stop)
       setTimeout(showImages, 5000);
}

stopClickfunction() {
   stop = true;
}

Answer 1

you need to clear the Timeout on stop.

maybe try something like that:

var timer = false;

playClickfunction()
{
    showImages();
}

showImages()
{

    //code to display image for all no of images
    //and user can stop on any no of image..
    if(!stop)
       timer = setTimeout(showImages, 5000);
}

stopClickfunction()
{

   clearTimeout( timer )
}