jQuery는 무한대로 회전합니다.

Question

제 질문은 두 부분으로 나누어 져 있습니다. 첫 번째는 jQuery Rotate를 사용하여 속도가 올라간 시계를 시뮬레이션하는 것입니다. 대부분의 경우이 기능은 작동하지만 특정 지점에 도달하면 중지 된 것으로 보이며 그 이유를 모르겠습니다. 내가 사용하고 아래 코드는 내가 무슨 말을하고 무슨 라이브 샘플 http://www.gvh.nextcode.com.au

var rotation = function(){ 
     $("#image1").rotate({ 
      angle:0, 
      duration: 80000, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 
    var rotation = function(){ 
     $("#image2").rotate({ 
      angle:0, 
      duration: 7500, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 

    var rotation = function(){ 
     $("#image3").rotate({ 
      angle:0, 
      duration: 80000, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 
    var rotation = function(){ 
     $("#image4").rotate({ 
      angle:0, 
      duration: 7500, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 

에 있으며 http://www.gvh.nextcode.com.au에서 라이브 샘플 사이트에서 동일한 클럭에 대한 내 질문의 두 번째 부분은 당신이 볼 것 AM 버튼이나 PM 버튼을 클릭하면 본질적으로 2 개 div로 전환됩니다. 이것은 IE8의 현대적인 브라우저에서 작동합니다. PM을 선택하면 div가 올바르게 바뀌지 만 시계 바늘이 전혀 나타나지 않고 왜 작동하지 않는 것 같아요.

div 스위치와 시계 손을 포함하여이 영역과 관련된 전체 자바 스크립트 소스를 배치했는데 누군가가 잘못된 방향에 대해 올바른 방향으로 나를 가리킬 수 있기를 바랍니다. 즉, "#의이 image4"와 관련된 일 - 반복 roatation()을 재정의함으로써

<script> 
    // set content on click 
    $('.m-btns-button').click(function(e) { 
     e.preventDefault(); 
     setContent($(this)); 
    }); 

    // set content on load 
    $('.m-btns-button.active').length && setContent($('.m-btns-button.active')); 

    function setContent($el) { 
     $('.m-btns-button').removeClass('active'); 
     $('.clock-nav').hide(); 

     $el.addClass('active'); 
     $($el.data('rel')).show(); 
    } 

    /**Tooltips**/ 
    $('.clock-nav a').tooltip(); 


    var rotation = function(){ 
     $("#image1").rotate({ 
      angle:0, 
      duration: 80000, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 
    var rotation = function(){ 
     $("#image2").rotate({ 
      angle:0, 
      duration: 7500, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 

    var rotation = function(){ 
     $("#image3").rotate({ 
      angle:0, 
      duration: 80000, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 
    var rotation = function(){ 
     $("#image4").rotate({ 
      angle:0, 
      duration: 7500, 
      animateTo:360, 
      callback: rotation, 
      easing: function (x,t,b,c,d){  // t: current time, b: begInnIng value, c: change In value, d: duration 
       return c*(t/d)+b; 
      } 
     }); 
    } 
    rotation(); 
</script> 

Answer 1

, callback: rotation 모든 경우 정의 마지막 roatation() 호출에 비동기. 다른 세 가지 의도 된 재귀는 사라질 것입니다.

각 콜백이 해당 rotation을 참조하도록하는 메커니즘이 필요합니다.

당신은 단순히 rotation1()rotation2()rotation3()rotation4()에 함수 이름을 바꿀 수 있지만 소스는 X4를 재사용 할 수있는 하나의 기능을 정의하여보다 컴팩트 한 것이다.

이 시도 :

function rotation($image, duration) { 
    //Outer function forms a closure trapping $image and duration 
    //Inner function is recursive. 
    var fn = function() { 
     $image.rotate({ 
      angle: 0, 
      duration: duration, 
      animateTo: 360, 
      callback: fn, 
      easing: easing 
     }); 
    } 
} 

//Easing is the same is all cases 
function easing(x,t,b,c,d) { 
    return c * (t/d) + b; 
} 

rotation($("#image1"), 80000); 
rotation($("#image2"), 7500); 
rotation($("#image3"), 80000); 
rotation($("#image4"), 7500);