jQuery遞歸函數調用和Javascript的setInterval之間有區別嗎？

-1

我正在動畫幾個波浪的圖像慢慢地反覆上下，給它一個更活潑的感覺，我發現Javascript的setInterval（）。這是完美的工作，每上下5.3秒（以不同的速度）上下移動我的不同波形圖像。jQuery遞歸函數調用和Javascript的setInterval之間有區別嗎？

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）比另一個有什麼優勢？

來源

2012-07-27 WOUNDEDStevenJones

這不是真的遞歸。這是自函數內部的一個自我引用，但它的只是的引用，而不是函數調用。函數調用在動畫完成時稍後由框架進行。

遞歸涉及到活動函數調用的「堆棧」，一個在另一個之上。（在交織相互遞歸函數的情況下，可以存在干預活動函數）。這不是這種情況。在呼叫基於傳遞給.animate()呼叫的參考時，對「animateWaves」的外部呼叫將完成。

請注意，jQuery動畫機制在其下面還使用瀏覽器的計時器機制。如果你使用圖書館，你最好讓它處理你的重複。

來源

2012-07-27 22:16:24 Pointy

不，它不會自己打電話。它將自身的引用傳遞給jQuery，並要求jQuery稍後調用它**。 – Pointy 2012-07-27 22:35:49

噢，我沒有足夠明確我想 - 我會說第二種方式更好，因爲您可以*確保*在該函數再次被調用時動畫將會完成。 – Pointy 2012-07-27 22:36:34

這是因爲setInterval根本沒有回調函數 - 如果動畫有延遲，它仍然會在5.3秒後重新啓動，對吧？ – WOUNDEDStevenJones 2012-07-27 22:40:55

jQuery遞歸函數調用和Javascript的setInterval之間有區別嗎？

回答

相關問題