jquery 제이쿼리 애니메이션 무한반복 만드는 법 Maximum call stack size exceeded 에러해결, 콜백함수, setInterval

 아래와 같이 무한동작을 만들었더니, 'Maximum call stack size exceeded error' 경고가 떴다. 

function move (){
    $('.ico').animate({'top':-115},500).animate({'top':-100},500); //애니메이션 1회 동작 함수 예시
    move();
};

move();

 

➜  콜백함수를 써서 무한동작을 만들었더니, 경고가 사라졌다!!!

function move (){
    $('.ico').animate({'top':-115},500, function(){
        $(this).animate({'top':-100},500, move)
    });
};
move();

 

왜 이런 차이가 발생했을까?

그 이유는,

 

콜백함수는 앞의 내용이 종료된 후에 콜백함수 안의 내용을 실행하기 때문이다.

함수가 최초 1회 실행되어 애니메이션 동작을 1회 실행하면,

아래와 같이 회색으로 처리된 부분을 먼저 실행하고 노란부분만 남기고 스택이 깔끔하게 비워진다.

$('.ico').animate({'top':-115},500, function(){$(this).animate({'top':-100},500, move)});

그 후에 남은 이 노란 부분이 실행되면서 같은 내용의 함수 다시 불러오고, 동작이 무한하게 반복될 수 있다.

 

 

반면에 위의 잘못된 예시에서는 1회 동작내용을 부름과 동시에, move함수를 부른다.

그 결과, 함수가 최초 1회 실행되어 애니메이션 동작을 1회 발생하는 하는 동안

동시에 불러진 함수 move 안에 벌써

$('.ico').animate({'top':-115},500).animate({'top':-100},500);move($('.ico').animate({'top':-115},500).animate({'top':-100},500);move($('.ico').animate({'top':-115},500).animate({'top':-100},500);move($('.ico').animate({'top':-115},500).animate({'top':-100},500);move(...););););

이렇게 스택이 무한으로 쌓이게 되고 에러가 난다.

 

 

 

---

근데 콜백함수는 어떻게 생겼지??

함수가 함수를 품고 있는 형태.

색깔로 설명하자면, 노락색 함수는 빨간색이 실행된 후에 초록색이 실행되는 내용을 가짐.

function 함수명 (){
    $('선택자1').동작함수1({'함수속성':값},동작시간, function(){
     $('선택자2').동작함수2({'함수속성':값},동작시간);
});
};

 

선택자가 같을 때 시간값을 갖는 동작함수는 같은 순차적으로 발생하기 때문에  굳이 콜백함수로 쓰지 않아도 됨.

function 함수명 (){
    $('선택자').동작함수1({'함수속성':값},동작시간).동작함수2({'함수속성':값},동작시간);
};

 

콜백하고 싶은 함수(초록색)가 이미 함수로 정의되어 있다면 풀어쓰지 않고 함수명을 써도 됨.

function 함수명1 (){
    $('선택자').동작함수1({'함수속성':값},동작시간, 함수명2);
};

 

//위의 콜백함수 예시와 같은 결과값을 가짐
function move (){
    $('.ico').animate({'top':-115},500).animate({'top':-100},500, move)
    });
};
move();

 

---

 

 

 

➜ 무한 동작을 만드는 방법으로 setInterval을 사용할 수도 있다.

동작 1회를 만들고 이를 setinterval을 이용해 반복시키는 방법이다.

일정시간마다 동작을 반복시키거나(반복시간 설정), 동작을 중간에 멈춰야 하는 경우에는(clearInterval을 사용)

이 방법을 이용하는 것이 더 편리할 것이다.

//setInterval을 이용한 동작 반복 공식
function 함수명 (){ 동작 1회 함수 내용 };
setInterval(function(){ 함수명();},반복간격);



//위와 같은 동작으로 만든 예시
function move (){  
    $('.ico').animate({'top':-115},500, function(){
        $(this).animate({'top':-100},500)
    });
};

setInterval(function(){
  move();
},0); //동장 반복 간격