Stop execution of recursive javascript function
Using jQuery I am creating an image / slide rotator. Basic setup (in pseudocode):
function setupUpSlide(SlideToStartWith){
var thisSlide = SlideToStartWith;
...set things up...
fadeInSlide(thisSlide)
}
function fadeInSlide(thisSlide){
...fade in this slide...
fadeOutSlide(thisSlide)
}
function fadeOutSlide(thisSlide){
...fade out this slide...
thisSlide.fadeOut(fade, function() {
var timeout2 = setTimeout(setupUpSlide(nextSlide),100);
}
I call the first function and pass at the specific index of the slide, and then it does its thing, calling the chaining of functions, which then in turn calls the first function, passed again at the next index. This then repeats endlessly (resetting the index when it gets to the last element).
This works great.
Now I want someone to stop showing the slideshow by clicking on a specific slide number. So if slide # 8 is displayed and I press # 3, I want the recursion to stop and then call the initial function passing in slide # 3, which then in turn starts the process again.
But I'm not sure how to do this. How to "break" a recursive script correctly. Should I create some kind of global variable "watch" that if it is "true" at any time will return: false and allow the new function to execute?
UPDATE: Added more verbose code showing the call to setTimeout
a source to share
Using recursion to implement a slideshow is probably not a good idea because it will end up with a stack overflow .
Use timeouts instead.
setTimeout () - Executes code in the future
clearTimeout () - Cancels setTimeout ()
Or intervals (thanks to Ricket for pointing this out!):
The setInterval () method calls a function or evaluates an expression at specific intervals (in milliseconds).
The setInterval () method will continue to call the function until clearInterval () is called or the window is closed.
a source to share
Here's an easy way to do it. First of all, instead of calling functions directly, use window.setTimeout(function(){...})
at the end of each function, replacing ...
with the last line (which makes a recursive call). This will prevent a stack overflow.
Second, provide a way to communicate with the loop. Your boolean clock variable is a good idea. It doesn't have to be global, it's just that the function associated with your click handler and slideshow functions has access to, for example, a static class variable. Watch this variable for changes and break the loop; or, if the variable is the currently configured slide.
Being light doesn't mean it's the best way to do it. For one thing, your jQuery animation calls are asynchronous and you need to use their callback functions instead of the way you do here, or all animations will happen at once. You can do it all in the space of a single function call in a single function. JQuery allows animations to be linked and also allows you to issue a command stop
for any existing animation. I would consider doing this first, rather than continuing with the installation you currently have.
a source to share