jQuery를 애니메이션 작동하지 않음 (숫자 카운트 다운/카운트 업)

Question

나는 다음과 같은 스크립트가 :

function powerClick(level, cost, user) { 
    clicks = Number(clicks) - cost; 
    addBPS(); 
} 
function addBPS() {  
    var from = {property: $('#current').text()}; 
    var to = {property: Number(clicks)}; 
    jQuery(from).animate(to, { 
     duration: 1000, 
     step: function() { 
      $('#current').text((Math.floor(this.property))); 
     } 
    }); 
} 

첫 번째 기능은 버튼을 클릭하면 실행하고 clicks의 값을 조정합니다. 그런 다음 기능 addBPS (바로 아래)을 실행합니다.

그러나 addBPS 함수는 변수 clicks에 저장된 숫자로 완전히 카운트 다운되지 않습니다. 많은 경우, 함수 powerClick은 변수 clicks을 0으로 설정합니다. 그러나 함수 addBPS이 실행되면 카운터는 0으로 내려 가지 않습니다.

왜 이런가요?

Answer 1

가능한 문제는 여기를 참조하십시오

1. 클릭이 globaly 정의되지 않기 때문에 그것은 할 수있다? 따라서 첫 번째 함수 실행이 끝날 때마다 값이 삭제됩니다.
2. this.property를 to.property 또는 from.property로 바꾸어보십시오.

3. "to"또는 "from"과 같이 덜 일반적인 변수 이름을 사용하는 것이 좋습니다. 언젠가는 생각하지 않고도 예약어를 사용하고있을 것입니다. 아직 모든 변수는 당신이 그 (것)들을 것으로 기대 것을 재확인하는 코드에 콘솔 로그를 삽입 한

   var clicks; 
   
   function powerClick(level, cost, user) { 
       clicks = Number(clicks) - cost; 
       addBPS(); 
   } 
   function addBPS() {  
       var data_before = {property: $('#current').text()}; 
       var data_after = {property: Number(clicks)}; 
       jQuery(from).animate(to, { 
        duration: 1000, 
        step: function() { 
         $('#current').text((Math.floor(data_after.property))); 
        } 
       }); 
   }