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中传递的初始函数，然后它将再次启动该过程。

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

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

Answer 1

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

改为使用timeouts。

setTimeout（） - 在将来的某个时间执行代码

clearTimeout（） - 取消setTimeout（）

或intervals（感谢Ricket指出这一点！）：

setInterval（）方法以指定的时间间隔（以毫秒为单位）调用函数或计算表达式。

setInterval（）方法将继续调用该函数，直到调用clearInterval（）或窗口关闭。

Answer 2

而不是间接递归，尝试使用定期超时（var timer_id = setInterval(...)）并在需要停止时使用clearTimeout

Answer 3

这是一种简单的方法。首先，不是直接调用函数，而是在每个函数的末尾使用window.setTimeout(function(){...})，将...替换为最后一行（进行递归调用）。这样可以防止堆栈溢出。

其次，提供一种与循环通信的方法。你的布尔监视变量是一个好主意。它不必是全局的，只是链接到您的单击处理程序的功能和幻灯片放映功能都可以访问 - 例如静态类变量。观察变量的变量并打破循环;或者，将变量设置为当前设置的幻灯片。

很容易，这并不意味着这是最好的方式。首先，您的JQuery动画调用是异步的，您需要使用它们的回调函数而不是您在此处执行的方式，或者所有动画将立即发生。您可以在一个函数中的单个函数调用空间中完成所有这些操作。 JQuery允许链接您的动画，它还允许您向任何现有动画发出stop命令。我会先研究这种做法，而不是继续你现在的设置。

停止执行递归javascript函数

3 个答案: