setTimeout在几分钟后发疯,FF6.0, Chrome 15

setTimeout goes mad after couple of minutes, FF6.0, Chrome 15

本文关键字:发疯 FF6 Chrome 几分钟 分钟 setTimeout      更新时间:2023-09-26

看一下我的news roller: LIVE DEMO

一切都很完美,直到你把脚本留在标签页几分钟。

发生的事情看起来像是浏览器丢失了每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();
});

:

<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>

我想我找到你的问题了,只是还不知道怎么解决。

我认为你所面临的问题是:当你离开它在一个标签打开,然后你隐藏的页面通过选择另一个标签,然后回到你的页面后+ 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:第一条注释解释了我所描述的问题的原因。

Edit 3:添加解决方案源代码

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

你可能不需要清除它,一旦超时函数命中,所以尝试做这个改变

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

看看你们相处得如何。但是,悬停中的clearartimeout是有效的。

更新:

我已经稍微移动了函数,现在看起来工作得很好,并且在动画之后设置新的超时使它感觉更流畅,这是我的小提琴版本:

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