jQuery的問題：如何使用setInerval函數來實現無限循環

Question

如何通過jQuery中的setInterval（）實現以下功能？

function1(){ 
    $("#img1").show(); 
    $("#img02").delay(1000).show(); 
    $("#img03").delay(2000).show(); 
    $("#img04").delay(3000).show(); 
    $("#img01").delay(4000).hide(); 
    $("#img02").delay(4000).hide(); 
    $("#img03").delay(4000).hide(); 
    $("#img04").delay(4000).hide(); 
} 
$(function(){ 
    setInterval("function1()", 2000); 
}); 

我想逐個顯示圖像並全部隱藏並一次又一次地執行。
但代碼不會做我想要的，圖像不按順序顯示。有人能告訴我爲什麼嗎？

Answer 1

閱讀this教程。

其中，作者講的是一款遊戲，但這可以用作任何事物的循環，而且非常優雅。

Answer 2

它們不按順序顯示的原因是因爲動畫發生在異步中，這意味着它會在第一次完成動畫之前再次啓動動畫。現在你有幾個動畫重疊在一起。你應該使用回調函數來實現這一點。