Question

我正在使用jquery easyTicker插件来显示实时滚动新闻。

我的要求是每5秒我将从后端获取最新数据（ajax调用）并更新livenews div

我面临的问题是div数据在5秒后消失了吗？

这是我的代码

var latestnewsresponse = [
    {
        "title": "Reliance Power Q2 net up 37% at Rs 346 crore",
        "pub_date": "2015-11-03 08:48",
        "link": "http://www.business-standard.com/article/companies/reliance-power-q2-net-up-37-at-rs-346-crore-115110300604_1.html"
    },
    {
        "title": "Buy Jubilant Life; target of Rs 578: P Lilladher",
        "pub_date": "2015-11-03 08:39",
        "link": "http://www.moneycontrol.com/news/recommendations/buy-jubilant-life-targetrs-578-p-lilladher_3920361.html"
    },
    {
        "title": "Sensex, Nifty volatile; Amtek Auto up 17%, LT most active",
        "pub_date": "2015-11-03 08:30",
        "link": "http://www.moneycontrol.com/news/local-markets/sensex-nifty-volatile-amtek-auto17-lt-most-active_3947741.html"
    },
    {
        "title": "Reliance Power Q2 net up 37% at Rs 346 crore",
        "pub_date": "2015-11-03 08:48",
        "link": "http://www.business-standard.com/article/companies/reliance-power-q2-net-up-37-at-rs-346-crore-115110300604_1.html"
    }

];

displaylivenews();

setInterval(displaylivenews, 5000); 

function displaylivenews()
{
    var s = "";
    for (var i = 0; i < latestnewsresponse.length; i++)
    {
        s += '<li><div class="itemTitle"><a href="' + latestnewsresponse[i].link + '"  target="_">' + latestnewsresponse[i].title + "</a></div>";
        s += '<div class="itemDate">' + latestnewsresponse[i].pub_date + "</div>";
        mysource = latestnewsresponse[i].link.split("://")[1].split('/')[0].replace(/(www.)|(.com)/g, '');
        s += '<div class="Source">' + mysource + "</div>";
        s += '</li>'
    }
    $("#livenewsRss").html("<ul class='feedEkList'>" + s + "</ul>").easyTicker(
    {
        direction: 'up'
    });
}

http://jsfiddle.net/2WZQP/7/

你能告诉我现在如何解决这个问题吗？

Answer 1

我注意到的第一件事是当displaylivenews()函数第二次运行时，easyticker插件将#livenewsRss的高度设置为0.所以，我设置了高度插件到第一次运行函数时设置的高度（216像素）。

我让它停止消失它的第二次执行后，我注意到它没有骑自行车。我认为这可能与插件的第一个实例永远不会被破坏有关。所以，我接受了underblob的建议，并将$.removeData($("#livenewsRss").get(0));添加到displaylivenews()函数的开头，以杀死任何以前版本的插件实例。

这是新的displaylivenews()功能。

function displaylivenews()
{
    $.removeData($("#livenewsRss").get(0));
    var s = "";
    for (var i = 0; i < latestnewsresponse.length; i++)
    {
        s += '<li><div class="itemTitle"><a href="' + latestnewsresponse[i].link + '"  target="_">' + latestnewsresponse[i].title + "</a></div>";
        s += '<div class="itemDate">' + latestnewsresponse[i].pub_date + "</div>";
    mysource = latestnewsresponse[i].link.split("://")[1].split('/')[0].replace(/(www.)|(.com)/g, '');
        s += '<div class="Source">' + mysource + "</div>";
        s += '</li>'
    }
    $("#livenewsRss").html("<ul class='feedEkList'>" + s + "</ul>").easyTicker(
    {
        direction: 'up',
        height: '216'
    });
}

这里是new fiddle。

如何正确使用Jquery easyTicker和setInterval函数？

1 个答案: