Question

我的页面上有多个元素，使用javascript setInterval在计时器上淡入和淡出以使它们处于运动状态。我把它们延迟了所以它们稍微偏移以创造一个很好的级联效果，但是如果你让页面打开足够长的时间，它们都会相互碰撞而且时间会搞得一团糟（你必须把它留下来几分钟）。

我在CodePen上有一个丑陋的问题示例：http://www.cdpn.io/wgqJj

同样，你必须让页面保持打开状态并且不受影响几分钟才能看到问题。如果页面上有更多项目（5或10），则问题变得更加明显。我也使用了几种jQuery照片旋转插件的这种效果，随着时间的推移，问题总会出现。

对此有什么解释吗？

这是我正在使用的代码（我知道javascript可能更干净）：

HTML：

<p id="one">First</p>
<p id="two">Second</p>
<p id="three">Third</p>

JavaScript的：

$(document).ready(function() {
  var timer1 = setTimeout(startOne,1000);
  var timer2 = setTimeout(startTwo,2000);
  var timer3 = setTimeout(startThree,3000);
});

function startOne () {
  setInterval(flashOne,3000);
}

function startTwo () {
  setInterval(flashTwo,3000);
}

function startThree () {
  setInterval(flashThree,3000);
}

function flashOne () {
  $("#one").fadeTo("slow",0.4).fadeTo("slow",1.0);
}

function flashTwo () {
  $("#two").fadeTo("slow",0.4).fadeTo("slow",1.0);
}

function flashThree () {
  $("#three").fadeTo("slow",0.4).fadeTo("slow",1.0);
}

Answer 1

考虑使用链式setInterval，因为这会为浏览器提供有保证的插槽。参考此SO post.。

目前您只使用setInterval来启动动画。从那里jQuery处理“振荡”。

理论上使用链式设置间隔应该保证浏览器的插槽。更重要的是，您可以在每个时间间隔对代码中的偏移进行硬编码，而不是仅在开始时编码一次。

Answer 2

问题已经回答here。引用本主题中评分最高的答案：

它会在执行前至少等待1000MS，它不会等到1000MS。

给出一个实际答案，我会这样解决：

$(function(){
  setTimeout(flashOne,1000);
});

function flashOne () {
  $("#one").fadeTo("slow",0.4).fadeTo("slow",1.0);
  setTimeout(flashTwo,1000);
}

function flashTwo () {
  $("#two").fadeTo("slow",0.4).fadeTo("slow",1.0);
  setTimeout(flashThree,1000);
}

function flashThree () {
  $("#three").fadeTo("slow",0.4).fadeTo("slow",1.0);
  setTimeout(flashOne,1000);
}

就像这样，定时器不可能搞得一团糟，因为它总是在之前的项目闪现后延迟一秒钟。

Answer 3

setTimeout()和setInterval()函数不保证您的事件按计划完全运行。 CPU负载，其他浏览器任务等可能会影响您的计时器，因此它们对您的用例来说不够可靠。

对此的解决方案是异步事件（承诺或类似）或使用jQuery提供的event queue。这样，您可以使用回调嵌套，或者将它们排队，然后一旦命中队列中的最后一项就重新启动队列。 .queue() API文档页面就是一个例子。

javascript setInterval没有正确保持时间

对此有什么解释吗？

3 个答案: