如何使用Jquery/javascript将递归函数转换为循环函数

Question

我正在尝试使用Jquery制作幻灯片,图片由一个每5.5秒调用一次的函数循环.但是,我试图避免递归,因为与迭代调用相比它非常昂贵.我假设这是IE加载幻灯片时无法停止加载图标的原因.所以我想将以下函数转换为迭代函数.

function playslides()
{

//hide previous slide
$(document.getElementById(t)).fadeOut("slow");


//reset slide index
calcSildes();

//show new slide
$(document.getElementById(t)).fadeIn("slow");

//recursive call after 5.5 sec
timer = setTimeout("playslides()", 5500);

}


//on page load...

$(document).ready(

playslides();

);

到目前为止,我的两种方法是:

1. 在$(document).ready()函数内创建一个while循环,并循环播放playlides()函数.

2. 创建另一个调用playslides()函数的计时器函数,并让playlides函数调用该计时器函数.(不确定这是否可以避免递归......)

谢谢!!

Answer 1

听起来像是你应该更换setTimeout()使用setInterval(),这将简单地重复给定函数,直到它的取消.不需要递归或循环.

引用 jQuery的创建者John Resig:

从根本上讲,了解JavaScript定时器的工作原理非常重要.通常,由于它们所处的单线程,它们的行为不直观.让我们首先检查我们可以访问的三个函数,它们可以构造和操作定时器.

var id = setTimeout(fn, delay); - 启动单个计时器,在延迟后调用指定的函数.该函数返回一个唯一的ID,可以在以后取消定时器.

var id = setInterval(fn, delay); - 与setTimeout类似,但不断调用函数(每次都有延迟),直到取消.

clearInterval(id);,clearTimeout(id);- 接受计时器ID(由上述任一功能返回)并停止发生计时器回调.

使用setInterval,您可以将代码简化为以下内容:

function playslides()
{
    //hide previous slide
    $(document.getElementById(t)).fadeOut("slow");

    //reset slide index
    calcSildes();

    //show new slide
    $(document.getElementById(t)).fadeIn("slow");
}

$(document).ready(function() {
     setInterval(playslides, 5500);
});