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动画机制还在其下面使用了浏览器的计时器机制。无论如何你都在使用图书馆，你可能最好让它为你处理重复。

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

1 个答案: