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

Is there a difference between jQuery recursive function calls and Javascript's setInterval?

本文关键字：setInterval 有区别 之间 递归 函数调用 Javascript jQuery      更新时间：2024-03-21

我正在制作一些波浪图像的动画，使其缓慢而重复地上下移动，以给它一种更生动的感觉，我发现了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）与另一种相比有什么优势？

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

递归涉及活动函数调用的"堆栈"，一个在另一个之上。（在相互交织的递归函数的情况下，可能会有介入的活动函数。）这里的情况并非如此。当根据传递给.animate()调用的引用进行调用时，对"animateWaves"的外部调用将完成。

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

相关文章：