당신도 전혀 setTimeout()
필요하지 않은 것으로 보인다.
yoru 애니메이션이 반복되고 반복되는 것을 가정하면 적절한 방법은 .animate()
의 완료 콜백을 사용하고 setTimeout()
을 사용하지 않는 것입니다. 다음과 같이 할 수 있습니다.
$(document).ready(function(){
function move(){
$("#block").animate({left:"+=50px" },1000)
.animate({top:"+=50px"},1000)
.animate({left:"-=20px"},1000)
.animate({top:"-=20px"}, 1000, move);
}
// call it the first time
move();
});
jQuery가 네 개의 애니메이션을 자동으로 순서 지정합니다.
당신이 알고 싶은 것은 마지막 것이 완료되었을 때입니다. 그래서 당신은 모든 것을 다시 시작할 수 있습니다. 마지막 .animate()
작업의 완료 기능을 사용하여 move()
으로 다시 호출 할 수 있습니다. 이 콜백은 비동기 라 불리기 때문에 스택에 스택 빌드 또는 재귀 빌드가없고 영원히 행복하게 실행할 수 있습니다. 설명의 방법으로
, 당신의 setTimeout()
는 setTimeout()
에 첫 번째 인수로 문자열을 통과 할 때, 그 문자열이 전역 범위에서 평가되기 때문에 작동하지 않았다 당신은에 move()
기능이없는 전역 범위이므로 찾을 수없고 실행되지 않았습니다. setTimeout(move, 1000)
에서와 같이 일반 Javascript 함수 참조를 전달하면 함수 참조가 현재 범위에서 평가되고 (setTimeout 호출이 수행되기 전에) 함수 참조가 올바르게 전달됩니다. 거의 문자열을 setTimeout()
으로 전달하면 안됩니다. 거의 항상 피해야하고 항상 피해야하는 나쁜 습관입니다. 그러나 아아, 어쨌든 여기서도 setTimeout()
이 필요하지 않은 것으로 보입니다.당신이 다른 후 하나를 시퀀스 네 개의 애니메이션을 원한다면
, 다시 다시 애니메이션을 반복하기 전에 1 초 일시 정지, 당신이 할 수 있습니다 :
여기
$(document).ready(function(){
function move(){
$("#block").animate({left:"+=50px" },1000)
.animate({top:"+=50px"},1000)
.animate({left:"-=20px"},1000)
.animate({top:"-=20px"}, 1000, function() {
setTimeout(move, 1000);
});
}
// call it the first time
move();
});
, 익명 함수는 완료 콜백으로 마지막 애니메이션으로 전달됩니다. 완료 함수에서 이 실행되어 1000ms에서 move
을 다시 호출합니다.
P. 애니메이션이 대칭이 아니므로 시작한 지점으로 돌아 가지 않으므로 실행될 때마다 개체가 오른쪽으로 30px 이동하고 계속해서 반복적으로 반복됩니다. 그게 당신이 의도 한 것인지 아닌지 확실하지 않습니다.
이것은 완벽하게 작동합니다. – eronax59
setTimeout은 전역 범위 (브라우저 내부의 윈도우 객체)에서 'move()'와 같은 문자열을 평가합니다. 귀하의 이동 기능은 $ (document) .ready()에 보내는 콜백에 국한됩니다. – progysm
@progysm이 쓴 내용. 이것이 정답입니다. 범위 지정 문제가 있습니다. – eltonkamami