我的setTimeout无法正常工作

Question

这是代码：

var stripeAnimation = function() {

var streetDivWidth = $('.street_name').width();
var streetFull = $('.street_name .street_name_text');

for(var i=0; i<streetFull.length; i++) {
    var item = $(streetFull[i]);
    var widthFull = item.width();
    var remainder = widthFull - streetDivWidth;
    var animationSpeed = widthFull * 5;
    var summary = streetDivWidth - widthFull;
    if(summary < 0) {
        item.children('.gradient_span').addClass('gradient');
        infinite();
        setTimeout(infinite, 1000);
    }

}
function infinite() {
    item.animate({
        marginLeft: '-' + remainder + 'px'
    }, animationSpeed).animate({
            marginLeft: 0
        }, widthFull).delay(1000);
}

}
$(document).ready(function() {
    stripeAnimation();
});

看起来应该以1000毫秒的延迟一遍又一遍地循环播放动画-“ setTimeout（infinite，1000）;”。 但事实并非如此。 请帮忙！

Answer 1

如果要循环，则需要使用setInterval（）

setInterval(infinite, 10000);

然后

function infinite() {
    item.animate({
        marginLeft: '-' + remainder + 'px'
    }, animationSpeed).animate({
            marginLeft: 0
        }, widthFull);
}

Answer 2

其余变量是局部变量，您像全局函数一样使用它。 应该在全局进行声明。

Answer 3

setTimeout将仅调用一次函数，但是，正如Arun P所说，您可以选择使用setInterval ，但不建议将其用于动画。 setInterval的问题在于，您指定的延迟间隔是直到它被调用之前的最短时间，但是不能保证在该间隔结束后将被调用。

一个示例是，如果您设置间隔为300毫秒，但队列被其他操作（UI或其他JS操作）阻塞了，例如600毫秒，则函数将被调用两次，一个接一个地进行，没有延迟，这会使您的动画不均匀。 您不能确保会在您的间隔恰好调用超时，但不能小于该间隔。

更好的方法是像您一样，使用setTimeout进行首次首次调用，然后在infinite()函数结束时再次调用setTimeout(infinite, 1000) 。

综上所述，如果适用，制作动画的最佳方法是requestAnimationFrame方法，您可以在此处进行研究：

https://developer.mozilla.org/zh-CN/docs/Web/API/window.requestAnimationFrame