javascript - 停止正在执行的递归 javascript 函数

Question

我使用 jQuery 构建了一个图像/幻灯片旋转器。基本设置是(伪代码):

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);
    }

我调用第一个函数并传入一个特定的幻灯片索引，然后它会调用函数链，然后依次调用第一个函数并传入下一个索引。然后无限重复(当它到达最后一个项目时重置索引)。

这很好用。

我现在想要做的是允许某人通过点击特定的幻灯片编号来覆盖幻灯片放映。因此，如果幻灯片 #8 正在显示并且我单击 #3，我希望递归停止，然后调用传递给幻灯片 #3 的初始函数，这将再次启动该过程。

但我不确定该怎么做。如何正确地“破坏”递归脚本。我是否应该创建某种全局“监视”变量，如果在任何时候为“真”，则该变量将返回:false 并允许执行新函数？

更新:添加了更详细的显示 setTimeout 调用的代码

Answer 1

使用递归来实现幻灯片放映可能不是一个好主意，因为它最终会给出一个stack overflow。 .

使用timeouts相反。

setTimeout() - executes a code some time in the future

clearTimeout() - cancels the setTimeout()

或intervals (感谢 Ricket 指出这一点!):

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.