javascript/jquery 内容旋转器变得疯狂（一段时间后开始快速循环）

Question

我正在使用一个非常简单的内容旋转器。

虽然它看起来工作正常，但有时，在浏览器窗口在该页面上停留一段时间（可能 10 分钟）后，动画开始高速播放（就像每个“帧”仅持续 1 毫秒）。

这是我的html：

<ul id="contentRotator">
<li class="cItem">
    <a href="#"><img src="" alt="" /></a>
    <h3><a href="#">Text</a></h3>
    <p><a href="#">Text</a></p>
</li>
<li class="cItem">
    ...
</li>
...
</ul>

这是脚本

function tCycle() {
    var duration = 4000;
    var speed = 500; //
    var arrDivs = $('#contentRotator .cItem');
    var arrLength = arrDivs.length;

    var iCurrent = 0;
    var iNext;

    arrDivs.not(arrDivs.eq(iCurrent)).hide();

    setInterval(function () {
        iNext = (iCurrent + 1) % arrLength;
        arrDivs.eq(iNext).fadeIn(speed);
        arrDivs.eq(iCurrent).fadeOut(speed);
        iCurrent = (iCurrent + 1) % arrLength;
    }, duration);
}

我在 chrome 16、ie8、firefox 7、opera 11 和 safari 5 中测试了该页面。它似乎只发生在 chrome 中。

对正在发生的事情有任何想法吗？

编辑：我发现当它变得疯狂时，如果我滚动到页面底部然后再回来（旋转器在顶部），它（有时）是固定的，速度正常。

Answer 1

我已经测试过http://jsfiddle.net/jphellemons/fRGqA/ 它适用于我的机器。 我有 Google Chrome 15.0.874.92 beta-m

您可能想要使用像 innerfade 这样的 jQuery 插件，因为 fadeIn 和 fadeOut 工作不那么流畅。

或使用：

arrDivs.eq(iCurrent).fadeOut(speed, function() {
    arrDivs.eq(iNext).fadeIn(speed);
});

编辑：也适用于 Chrome 15.0.874.100！