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

순서대로 표시되지 않는 이유는 애니메이션이 비동기로 발생하기 때문입니다. 즉, 처음으로 애니메이션을 끝내기 전에 애니메이션을 다시 시작하기 때문입니다. 지금은 서로 겹치는 여러 애니메이션이 있습니다. 이를 위해 콜백 함수를 사용해야합니다.