Jquery新闻阅读器的调试

jquery news ticker bugging out

本文关键字：调试 新闻 Jquery      更新时间：2023-09-26

我正在使用从教程中找到的代码来构建一个新闻提示器，它每次淡入和淡出一行。它应该在字里行间循环:"故事标题1"、"另一个故事标题2"、"第三个故事标题"answers"最后的第四个标题"。问题是新闻自动报价器最终会一次显示多个条目。例如，我会看到"故事标题1另一个故事标题2"这样的内容。更改显示下一行文本所需的时间长度并不能解决问题，但会延迟显示故障。

完整代码:

<head> 
<style type="text/css"> 
/* CSS goes here */
#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px; 
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider { 
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;   
}
</style> 
</head> 
<body> 
<div id="ticker" class="newsTicker"> 
    Announcement 
    <span class="divider">|</span> 
    <ul> 
        <li><a href="">Story headline 1</a></li> 
        <li><a href="">Another Story headline 2</a></li> 
        <li><a href="">Some third story headline</a></li> 
        <li><a href="">A final, fourth headline</a></li> 
    </ul> 
</div> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script type="text/javascript"> 
// javascript will go here
$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);
        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed); 
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };

        var speed = 1000;
        var autoInterval;
        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);
        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();
    });
});
</script> 
</body> 
</html>

我为您的代码创建了一个jsfiddle。http://jsfiddle.net/playerace/Tssds/

我测试了各种时间长度，当渐入/渐出延迟一点并被您为间隔设置的1000ms捕获时，会发生故障。在您的浏览器上浏览多个选项卡，或者在我的示例中，加载此代码的多个jsfiddle实例将导致故障。

做简单的删除和追加修复故障，因为你不能控制用户的行为，当他们浏览你的页面，他们可能会加载很多东西。

我能想到的一个解决方案是删除setInterval，并找到一些其他的方法来禁用showLink()，而鼠标悬停在股票。

相关文章：