Question

我被要求做一个小的div循环淡入淡出效果。有几种方法可以做到这一点，但我想知道为什么以下只运行效果一次。

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

据我所知，该函数应该以递归方式运行，但事实并非如此。

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

Answer 1

请不要将setInterval用于此。

您正在调用setInterval，延迟为0.这意味着它将继续执行 - 比动画完成的速度更快。这将继续为jQuery的内部队列添加动画效果，随着时间的推移建立内存使用。

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

相反，采取这种方法：

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

在这里，您将fadeInOut函数作为回调传递给jQuery完成fadeIn动画时自动调用。这可以保证在上一个周期完成之前不会开始新的动画循环。

Answer 2

当延迟过去时，

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

每次间隔过去都会调用

setInterval，在你的情况下一直，因为间隔是0.我想你想要更像的东西：

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

Answer 3

setTimeout方法将在一段时间后执行某些操作，而setInterval方法将在X秒后迭代执行某些操作（取决于间隔）。

因此，要让setTimeout迭代地执行某些操作，您需要将setTimeout包装在循环（或类似）中。

但根据你的目标 - setInterval方法是两者中最好的。

退房：

和

Answer 4

这是两个人的定义

setTimeout - setTimeout函数延迟指定的时间段，然后是
触发指定函数的执行。一旦该函数被触发，则setTimeout
已完成。你当然可以在它之前终止setTimeout的执行使用clearTimeout函数触发函数。

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

Answer 5

setTimeout（func，millis）说“在millis过去之后，我将调用func”。你的功能是

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

因此，经过零毫秒后，您的函数将被调用。但是你的函数中没有任何东西告诉它再次调用setTimeout。

这样的事情会起作用：

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

my_func();