javascript - 几分钟后 setTimeout 发疯，FF6.0，Chrome 15

Question

看看我的新闻滚筒: LIVE DEMO

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

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

我猜它与setTimeout有关。

有什么解决办法吗？

脚本:

(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无法在当前没有选中tab的情况下进行视觉效果。所以在我看来，它将所有的效果都放在一个队列中，并在您返回选项卡时一个一个地执行它们。不知道为什么会这样。

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

简单添加

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

并在某处添加一个 div block

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

这会告诉你调用总是有 5 秒的延迟。

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

也从第一条评论中的链接复制粘贴:

To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation

所以你的代码应该改成这样:

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:添加了解决方案源代码