-1

我正在制作一些波浪图像以缓慢反复地上下移动，以赋予它更生动的感觉，我发现了 Javascript 的 setInterval()。这非常适合每 5.3 秒（以略微不同的速度）上下动画我的不同波浪图像。

self.setInterval("waves()",5300);

function waves() {  
$('.waves1').animate({
    bottom: '-5px'
}, 2000);
$('.waves1').animate({
    bottom: '7px'
}, 3000);

$('.waves2').animate({
    bottom: '-5px'
}, 2200);
$('.waves2').animate({
    bottom: '7px'
}, 2800);

$('.waves3').animate({
    bottom: '-5px'
}, 1800);
$('.waves3').animate({
    bottom: '7px'
}, 3200);
}

在实现这个之后，我还发现你可以只使用一个递归的 jQuery 函数来保持动画的继续。例如：

function animateWaves() {
   $('.waves1').animate({ top: '+=15' },
                        { duration: 2000, easing: "linear" })
               .animate({ top: '-=15' },
                        { duration: 3000, easing: "linear",
                          complete: animateWaves });
}

$(function() {
    animateWaves();
});

一个（递归或setInterval）比另一个有什么优势？

4

1 回答 1

1

这不是真正的递归。它是函数内部的自引用，但它只是一个引用，而不是函数调用。当动画完成时，框架稍后会进行函数调用。

递归涉及活动函数调用的“堆栈”，一个在另一个之上。（在相互交织的相互递归函数的情况下，可能存在干预活动函数。）这里不是这种情况。当基于传递给.animate()调用的引用进行调用时，对“animateWaves”的外部调用将已完成。

请注意，jQuery 动画机制还使用了浏览器的计时器机制。如果你仍然在使用这个库，你最好让它为你处理重复。

于 2012-07-27T22:16:24.900 回答