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();
});

看起来它应该在1000ms的延迟中反复循环动画 - “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/en-US/docs/Web/API/window.requestAnimationFrame

我的setTimeout无法正常工作

3 个答案: