Javascript 我跑得很慢

我做了一个网站，我需要动画字符串比包含父字符串长

这是网站：

如果单击“下一步”，您可以看到多页繁育者的名字很长，需要从左到右设置动画，但这只发生在10秒或15秒后，需要很长时间才能开始

现在我已经检查了我的代码，这是我创建函数的地方：

function newsTicker() {
console.log('newsTicker')
verifyLength();
$('.breeder').not('.short-breed-name').each(function() {
    var breederNameWidth = $(this).find('.breeder_name').width();
    var divBreederNameWidth = $(this).find('.breeder_name_div').width();
    var diff = Math.max(parseInt(breederNameWidth - divBreederNameWidth),0);
    // console.log('diff:',diff)
    $(this).find('.breeder_name').animate({
        marginLeft: -diff
    }, 3000,
    function(){
        $(this).animate({
            marginLeft : 0
        },3000)
    })
})
}

function verifyLength() {
    // console.log('verifyLength')
    $('.breeder.visible').each(function() {
        // debugger
        var breederNameWidth = $(this).find('.breeder_name').width() + 10;
        var divBreederNameWidth = $(this).find('.breeder_name_div').innerWidth();
        if(breederNameWidth < divBreederNameWidth) {
            $(this).addClass('short-breed-name');
            $(this).find('.breeder_name').css({'width':'100%','text-align':'center'})
        }
    })
}

---

为什么我的时间在1到3秒之间时它会这么慢？

您应该调用

setTimeout

而不是

setInterval

，因为您只希望动画运行一次。您每秒都要重新启动动画

---

此外，单击“下一步”或“上一步”

“BITDEFENDER已阻止此页面”！不，我希望它运行多次，每几秒钟一次。那么为什么您的

setInterval

设置为每秒？每个动画需要3秒钟？也许您的

setInterval

应该设置为3000，而animate调用应该设置为1000。此外，您需要确保在再次单击“下一步”时取消设置间隔是的，我认为这是我的错误。我调用了一个函数，该函数为每次单击下一个或上一个设置间隔，从而极大地增加了时间。

function breederAnimate(){
    verifyLength();
    newsTicker();
    setInterval(newsTicker, 1000);
}