setTimeout 在几分钟后变得疯狂，FF6.0，Chrome 15

Question

看看我的新闻滚轮：现场演示

一切正常完美，直到您将 scipt 留在选项卡中几分钟。

发生的事情看起来浏览器每 5 秒就会丢失一次计数，并且不断执行操作。

我猜它与和设置超时。

有什么建议如何修复它吗？

脚本：

(function($) {

$.fn.NoticeBoard = function() {


    // Set a timeout
    var timeOut = setTimeout(nextNotice, 5000);

    // pause on hover
    $('.noticeboard').hover(

    function() {
        clearTimeout(timeOut);
    }, function() {
        timeOut = setTimeout(nextNotice, 5000);
    });

    // Next notice function called on timeout or click

    function nextNotice(event) {
        clearTimeout(timeOut);
        timeOut = setTimeout(nextNotice, 5000);

        if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
            $('.noticeboard span:visible').fadeOut(300);
            $('.noticeboard span:first-child').fadeIn();
        }
        else {
            $('.noticeboard span:visible').fadeOut(300).next().fadeIn();
        }
        return false;
    }

    $('#notice-next').click(nextNotice);
    $('#notice-prev').click(function(event) {


        if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) {
            $('.noticeboard span:visible').fadeOut(300);
            $('.noticeboard span:last-child').fadeIn();
        }
        else {
            $('.noticeboard span:visible').fadeOut(300).prev().fadeIn();
        }
        return false;

    });

};


 })(jQuery);

$(document).ready(function() {

$('.noticeboard span').hide();
$('.noticeboard span:first').show();
$('.noticeboard').NoticeBoard();

});

HTML：

<div class="action-box"> 
<!-- NOTICEBOARD NAV --> 
<a href="#" id="notice-prev">«</a> <a href="#" id="notice-next">»</a> 
<!-- /NOTICEBOARD NAV --> 

<span class="ge"></span>
<div class="noticeboard" style="height: 145px;"> 
    <span style="display: block; opacity: 0.515705;">
        <strong>Boy, 14, found stabbed to death</strong>
        <a href="http://www.bbc.co.uk/news/uk-england-14570107">A 14-year-old boy has been found stabbed to death in a park in north London.</a>
    </span>

    <span style="display: block;">
        <strong>A-level passes rise for 29th year</strong>
        <a href="http://www.bbc.co.uk/news/education-14558490">Hundreds of thousands of teenagers are getting their A-level results amid an intense battle for university places ahead of tuition fee rises.</a>
    </span>
    <span style="display: none;">
        <strong>UK: Matter of time for Gaddafi</strong>
        <a href="http://www.bbc.co.uk/news/uk-politics-14625484">Deputy Prime Minister Nick Clegg has said it is "only a matter of time" before Col Muammar Gaddafi is defeated.</a>
    </span> 
</div>

Answer 1

我想我已经找到了你的问题，但还不知道如何解决。

我认为您面临的问题是这样的：当您在选项卡中将其打开，然后通过选择另一个选项卡隐藏页面，然后在布告栏保留的 + 10 秒（或分钟，如果您愿意）后返回到您的页面闪烁。

这可能是因为当前未选择选项卡时 jquery 无法执行视觉效果。所以在我看来，它将所有效果保留在队列中，并在您返回选项卡时一一执行它们。不知道为什么会这样做。

我已经在您的 nextNotice 函数中添加了一个简单的调试行，以证明问题不是 setTimeout

只需添加

var d = new Date();
$("#debug").append(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + " call to nextNotice<br />");

并在某处添加一个 div 块即可

<div id="debug"></div>

这将向您显示调用始终有 5 秒的延迟。

现在要弄清楚为什么 jquery 对视觉效果进行排队...

还可以从第一条评论中的链接复制粘贴：

为了避免这个潜在的问题，请使用循环中最后一个动画的回调，或者将一个函数附加到元素.queue()来设置启动下一个动画的超时

所以您的代码应该更改为：

function nextNotice(event) {
    if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
        $('.noticeboard span:visible').fadeOut(300);
        $('.noticeboard span:first-child').fadeIn(300, function() {timeOut = setTimeout(nextNotice, 5000);});
    } else {
        $('.noticeboard span:visible').fadeOut(300).next().fadeIn(300, function() {timeOut = setTimeout(nextNotice, 5000);});
    }
}

这将确保新的超时仅在动画结束时开始。因此，如果您离开选项卡，则最后一个未播放的动画将不会开始新的超时，直到您返回选项卡。

编辑：正确格式化代码块

编辑2：第一条评论解释了我描述的问题的原因。

编辑3：添加解决方案源代码

Answer 2

setTimeout 设置一个只运行一次的计时器。

一旦超时功能命中，您可能不需要清除它，因此请尝试进行此更改

function nextNotice(event) {
    // clearTimeout(timeOut);

并看看您的进展如何。
悬停中的clearTimeout是有效的。

更新：

我稍微移动了该函数，现在看起来工作正常，并且在动画后设置新的超时使其感觉更流畅，他是我的小提琴版本：

http://jsfiddle.net/t4NXD/20/