jQuery 递归函数调用和 Javascript 的 setInterval 有区别吗？

Question

我正在制作一些波浪图像以缓慢反复地上下移动，以赋予它更生动的感觉，我发现了 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）相对于另一个有什么优势？

Answer 1

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

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

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