아래와 같이 무한동작을 만들었더니, '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();
동작 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); //동장 반복 간격
'JS(JQuery)' 카테고리의 다른 글
jquery 엘리먼트를 역순, 최신순 정렬하기. 선택자 preAll() (0) | 2023.11.02 |
---|---|
jquery 제이쿼리 반응형 화면 사이즈 변하면 새로고침 (0) | 2023.10.26 |
jquery 반응형 화면 사이즈 새로 측정하기. 미디어쿼리 구간과 오차 없애기 (0) | 2023.10.22 |
jqurey 특정 엘리먼트 위에서 AOS가 동작하게 하려면 (0) | 2023.10.21 |
jquery 자신 제외한 부분을 클릭했을 때 사라지게 하기.(e.target) (1) | 2023.10.21 |