2016-07-20 3 views
0

애니메이션을 계속 작동 시키려면 콘솔에 "VM1179 : 1 Uncaught ReferenceError : move is not defined"오류가 항상 있습니다. 여기setTimeout() 함수가 작동하지 않습니다.

$(document).ready(function(){ 

    function move(){ 
     $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"}); 
     setTimeout('move()',1000); 
    } 
    move() 
}) 
+0

이것은 완벽하게 작동합니다. – eronax59

+2

setTimeout은 전역 범위 (브라우저 내부의 윈도우 객체)에서 'move()'와 같은 문자열을 평가합니다. 귀하의 이동 기능은 $ (document) .ready()에 보내는 콜백에 국한됩니다. – progysm

+0

@progysm이 쓴 내용. 이것이 정답입니다. 범위 지정 문제가 있습니다. – eltonkamami

답변

1

당신은 인자로 문자열과 같은

setTimeout('move()',1000); 

setTimeout는 (귀하의 경우, window) 전역 범위에서 함수를 받았지만를 사용하는 경우에는 document.ready 인수 함수 내에서 move()를 정의하기 때문에, 글로벌 범위로 이동하지 않습니다.

용액에 직접 setTimeout 인수로 move 함수의 참조를 사용하는 것이다

setTimeout(move, 1000); 

는 기능이 존재하는 지역 범위를 픽업에서이 방법.

-1

아래의 코드를 복사 ... 이유를 알고하지 마십시오 당신이 볼 필요가 무엇 :

$(function(){ 

function ba(){ 
    $('#block').animate({left:'+=50px' }, 1000).animate({top:'+=50px'}, 1000).animate({left:"-=20px"}, 1000).animate({top:'-=20px'}, 1000); 
} 
function move(){ 
    ba(); 
    setTimeout(ba, 1000); 
} 
move(); 

}); 
+0

setTimeout이 이동해야합니다() – progysm

+0

해결해 드리겠습니다. – PHPglue

+0

첫 번째 호출을 위해 1000ms를 기다리기 때문에 원래 버전과 다릅니다. – progysm

0

을 downvoted 대답은 올바른 것입니다. 의 setTimeout 함수 값 (AN도하지 않은 기능)이 아니라 당신 같은 호출 기능을 필요가 있습니다 setTimeout('move()',1000);

대신이 시도 : setTimeout(move,1000);

+0

답변에있는 문자열입니다. – PHPglue

+1

@PHPglue thanks, fixed – aeb0

-2

코드가 있어야하지 않나요이


$(document).ready(function(){ function move(){ console.log("hu"); } setTimeout(move(),1000); })

+1

setTimeout은 문자열이나 함수를 허용합니다. move()를 실행하고 undefined를 반환합니다. – progysm

+0

투표 및 주석 달기 전에이 코드를 실행 해 보았습니다 –

+0

예, MDN의 setTimeout에 대한 설명서도 읽었습니다 : https://developer.mozilla.org/en/docs/Web/API/WindowTimers/setTimeout . setTimeout은 undefined 값이 아닌 함수 또는 문자열을 사용합니다. – progysm

1

으로 뭔가를 스크립트가 잘 작동하고있는 것으로 나타났습니다. 그러나 당신은 이렇게 할 수 있습니다.

$(document).ready(function(){ 
    move(); 
}); 

function move(){ 
     $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"}); 
     setTimeout('move()',1000); 
} 
0

초마다 기능을 호출하려면 사용할 수 있습니다.

<script type="text/javascript"> 
     $(document).ready(function(){ 

      function move(){ 
       console.log("Called"); 
       $("#block").animate({left:"+=50px" },1000).animate({top:"+=50px"},1000).animate({left:"-=20px"},1000).animate({top:"-=20px"}); 

      } 

      window.setInterval(function(){ 
       move() 
      }, 1000); 
     }) 
    </script> 

다음 콘솔을 확인는

+0

익명 함수를 사용하여 정의 된 함수를 호출 할 때 요점이 표시되지 않습니다. –

2

당신도 전혀 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 이동하고 계속해서 반복적으로 반복됩니다. 그게 당신이 의도 한 것인지 아닌지 확실하지 않습니다.

+0

감사! 더 이상 혼란 스러울 필요가 없습니다. 당신의 설명은 아주 분명합니다. –

관련 문제