Question

我创建了一个网站，我需要设置比包含父级更长的字符串。

这是网站：Here

如果你点击下一步，你可以看到多个具有长名称的育种者页面，需要从左到右动画，但这只发生在10或15秒之后，它需要很长时间才能启动。 / p>

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

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'})
        }
    })
}

这就是我所说的newsTicker：

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

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

Answer 1

您应该调用setTimeout而不是setInterval，因为您只希望动画运行一次。您每秒都要重新启动动画

此外，当您单击下一个或上一个

时，您应该取消现有的setIntervals

setInterval运行速度很慢

1 个答案: