用javascript实现照明效果

用javascript实现照明效果,javascript,jquery,Javascript,Jquery,我想在JavaScript中使用递归来生成一个无限循环。事实上,我希望给一个图像一个来来去去的效果,永无止境 让我们先看看一些代码: function lightening(){ $('#pic_holder').fadeOut(250).fadeIn(250); setTimeout('lightening', 250); } 正如所写的,这个函数应该 应用fadeOut(250)和fadeIn(250)效果 启用setTimeout函数,该函数必须递归调用Lighting

我想在JavaScript中使用递归来生成一个无限循环。事实上,我希望给一个图像一个来来去去的效果,永无止境

让我们先看看一些代码:

function lightening(){
    $('#pic_holder').fadeOut(250).fadeIn(250);
    setTimeout('lightening', 250);
}
正如所写的,这个函数应该

  • 应用
    fadeOut(250)
    fadeIn(250)
    效果
  • 启用
    setTimeout
    函数,该函数必须递归调用
    Lighting
    函数,然后重新应用[fadeOut fadeIn effect and setTimeout]代码块
你会同意,这应该是无限的,但事实并非如此

正如您所注意到的,这里有一个方法,它只应用了一次淡出淡出效果


我做错了什么

设置超时的第一个参数可以是:

  • 要调用的函数;或
  • 要执行的JavaScript字符串
您的函数没有被调用,因为它的名称只是一个字符串。删除单引号

function lightening(){
    $('#pic_holder').fadeOut(250).fadeIn(250);
    setTimeout(lightening, 250);
}
正确使用。

删除引号

setTimeout(lightening, 250);
你真正应该做的是:

function lightening(){
  $('#pic_holder').fadeOut(250).fadeIn(250, lightening);
}

这将使下一个循环在淡入完成时开始。将您自己的超时与jQuery动画调用暗示的超时混合起来是很棘手的,而且通常是不必要的。在您的情况下,您将在上一个周期的中途开始一个新的周期,直到250毫秒后才会生效。

请使用回调,而不是使用两个相互竞争的计时器,这两个计时器可能会出现间歇性错误或过于慷慨:

function lightening(){
    $('#pic_holder').fadeOut(250).fadeIn(250, lightening);
}

计时器间隔应该是500毫秒,而不是250毫秒。请注意,对“fadeOut”和“fadeIn”的调用将立即返回,即使效果需要500毫秒。如果你在250毫秒内开始下一个周期,你将建立一个积压工作。还要注意,你问题中的代码不是递归的。异步和递归是完全不同的东西。@FrédéricHamidi我想说两者都是。@basilikum-怎么会这样?根据:
Recursion在计算机编程中是一个例子,当一个函数被定义为更简单的,通常更小的版本时。然后,通过结合从问题的较简单版本获得的解决方案来设计问题的解决方案。
@basilikum-同样来自维基百科:
主要缺点是,如果递归深度非常大,算法可能需要大量内存。
。这似乎意味着一个堆栈(我在这里忽略TCO),其中每个调用都返回状态。这只是在模拟
setInterval
,我希望我们能同意这不是递归。+1用于使用回调。我删除了我的答案,因为你的答案是第一个。以下是我在我的帖子中添加的注释:这个解决方案考虑到了一个事实,即时间安排不能保证。计时器保证事件发生前的最短时间,但根据处理情况,可能会更长。同样,也不能保证动画立即开始。这可能令人毛骨悚然,但我认为这至少值得注意并添加到答案列表中。这很性感。回答得好。