javascript setInterval 没有正确地保持它的时间

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

问题已经得到解答here .引用本主题中评分最高的答案:

it will wait AT LEAST 1000MS before it executes, it will NOT wait exactly 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);
}

像这样，计时器不可能搞砸，因为它总是在前面的项目闪烁后延迟一秒钟。