2011-03-29 118 views
1

我被要求做一个小的div循环淡入和淡出效果。有几种方法可以做到这一点,但我想知道为什么只有一次运行效果。setTimeout不递归调用匿名函数

$(document).ready(function() { 
    (function(){ 
     setTimeout(function(){$("#foo").fadeOut().delay(800).fadeIn(800);},0) 
    })(); 
}); 

据我所知,该函数应该递归运行,但它不会。

我用setInterval(function(){$("#foo").fadeOut().delay(800).fadeIn(800);}, 0);去了,因为它完成了工作,但我仍然想知道为什么setTimeout没有按预期工作。

+2

你为什么认为它会递归运行? – Shad 2011-03-29 04:26:21

回答

6

请你不要为这使用setInterval

你打电话setInterval延迟0.这意味着它将继续执行 - 比动画可以完成更快。这将继续向jQuery的内部队列添加动画效果,随着时间的推移构建内存使用情况。

可能将延迟时间增加到至少等于动画长度的值,但这是不可靠的。定时器(和动画)可以被其他代码延迟,并且应该避免这种硬编码。

相反,采取这种做法:

function fadeInOut() { 
    $("#foo").fadeOut().delay(800).fadeIn(800, fadeInOut); 
} 
fadeInOut(); 

在这里,你是路过的fadeInOut功能为jQuery的时候完成的fadeIn动画被自动调用回调函数。这保证了一个新的动画循环直到前一个循环完成才会开始。

+0

我想完成一行工作,但这显然是更负责任的方法。谢谢你的提示。 – 2011-03-29 04:45:36

+0

这比我的优雅。 – RSG 2011-03-29 04:49:51

4

setTimeout(fx,delay)将在延迟过去时被调用一次。在这种情况下,使用延迟0来调用它与在没有超时的情况下调用代码相同。

setInterval被称为每次间隔过去后,你的情况所有的时间因为间隔为0。我想你想要更多的东西一样:

setInterval(function(){ 
    $('#foo').toggleFade(800); 
}, 800); 

My favorite timeout vs interval posting

+0

@Shrinath什么时候人们要停止引用回调函数? – alex 2011-03-29 04:30:41

+3

你可以用setInterval阻塞调用堆栈。如果函数运行时间超过800毫秒,该怎么办?让函数再次调用setTimeout是更好的IMO。 – 2011-03-29 04:33:28

+0

@alex当人们停止转介w3schools。 http://w3fools.com – 2011-03-29 04:34:24

0

这里是二者的定义

setTimeout - setTimeout函数延迟了指定的时间段,然后
触发执行指定的功能。一旦功能被触发,setTimeout
已经完成。在使用clearTimeout函数触发函数之前,您当然可以终止setTimeout的执行。

的setInterval -的setInterval函数也延迟了指定的时间之前
触发一个特定的功能的执行。不同之处在于在触发该功能之后
该命令没有完成。相反,它会再次等待指定的时间,然后再次触发该功能并继续重复执行此过程,以指定的时间间隔触发该功能,直到
, 网页被卸载或调用clearInterval函数为止。

0

的setTimeout(FUNC,millis)来表示, “米利斯过去后,我将调用FUNC”。你的功能是

function(){ 
    $("#foo").fadeOut().delay(800).fadeIn(800); 
} 

所以经过零毫秒后,你的函数被调用。但是你的函数中没有任何东西告诉它再次调用setTimeout。

像这样将工作:

function my_func() { 
    // do something 
    setTimeout(my_func, 1000); 
} 

my_func();