我的 setTimeout 无法正常工作答案

【问题标题】：my setTimeout doesn't work correctly我的 setTimeout 无法正常工作
【发布时间】：2013-10-20 08:57:40
【问题描述】：

这是代码：

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);”。但事实并非如此。请帮忙！

【问题讨论】：

标签： javascript jquery loops settimeout

【解决方案1】：

如果要循环，则需要使用 setInterval()

setInterval(infinite, 10000);

然后

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

【讨论】：

我会避免对动画使用 setInterval，它可能会导致动画不均匀。
jsfiddle.net/twTLz/2 在这里，我不知道为什么它只适用于最后一个 span 块。(((

【解决方案2】：

剩余变量是本地的，你像全局函数一样使用它。应该全局声明它。

【讨论】：

【解决方案3】：

setTimeout 只会调用您的函数一次，但正如 Arun P 所说，您可以选择使用 setInterval，只是不建议将它用于动画。 setInterval 的问题在于，您指定的延迟间隔是直到它被调用的最短时间，而不是当该间隔结束时它将被调用的承诺。

例如，如果您设置了 300 毫秒的间隔，但队列被其他操作（UI 或其他 JS 操作）占用了 600 毫秒，那么您的函数将被调用两次，一个接一个没有延迟，这将使您的动画不均匀。您无法确保将在您的时间间隔内调用超时，但不得少于该时间间隔。

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

话虽如此，如果适用的话，最好的动画方法是 requestAnimationFrame 方法，你可以在这里查看：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

【讨论】：

嗨！谢谢你。但是我改变了方法，它仍然以相同的方式工作：jsfiddle.net/twTLz/9
它确实循环，“仍然以相同的方式工作”是什么意思？哪里不对？
看起来不错，我看你用过requestAnimationFrame，还在无限函数中调用。因为这是我的建议，如果你能接受我的回答作为这个问题的正确答案并投票赞成，我将不胜感激
非常感谢！但对不起 - 我不能投票给你的答案，因为我的声誉很低。当我到达一些时我会的。