我的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