jQuery - 이전 함수 실행을 중지합니다.

Question

사용자가 주행 거리계 (카운터 변수의 스크립트 맨 아래)를 설정하기 위해 데이터를 입력 할 때 호출되는 함수가 있습니다. 사용자가 필드를 변경하고자하는 경우 양식에 새로운 데이터를 넣으면 주행 거리계가 재설정되고 다시 시작됩니다.

문제점은 이전 기능 (jOdometer)이 이전 데이터 및 새 주행 거리계와 함께 계속 실행되고 있다는 것입니다. 이전 기능의 실행을 중지하고 다시 시작하려면 어떻게합니까?

나는

$(function(){ 

     var counter; 

     $('#submit').click(function(){ 

      if(counter != undefined){ 
       counter.stop(); 
      } 

      // get values from user. 
      var counter_start = 0; 
      var counter_end = 0; 
      var increment = 0; 
      var delayTime = 0; 
      var speed = 0; 
      var extraDigits = []; 

      if($('#counter_end').length > 0){ 
       counter_end = $('#counter_end').val(); 
      }else{ 
       counter_end = false; 
      } 
      if($('#counter_start').length > 0){ 
       counter_start = $('#counter_start').val(); 
       if(counter_end.length > counter_start.length){ 
        for(i=counter_start.length+1; i<=counter_end.length; i++){ 
         extraDigits = '0' + extraDigits; 
        } 
        if(extraDigits.length > 0){ 
         counter_start = extraDigits + counter_start 
        } 
       } 
      }else{ 
       counter_start = 1; 
      } 
      if($('#increment').length > 0){ 
       increment = $('#increment').val(); 
      }else{ 
       increment = 1; 
      } 
      if($('#delay_time').length > 0){ 
       delayTime = $('#delay_time').val(); 
      }else{ 
       delayTime = 500; 
      } 
      if($($('#delay_time')).length > 0){ 
       delayTime = $('#delay_time').val(); 
      }else{ 
       delayTime = 1000; 
      } 

      counter = $('.counter4').jOdometer({ 
       counterStart: String(counter_start), 
       counterEnd: String(counter_end), 
       delayTime: parseInt(delayTime), 
       increment: parseInt(increment), 
       speed: parseInt(speed), 
        formatNumber: true, 
       spaceNumbers: 0, 
       widthDot: 10 
      }); 
     }) 

    }); 

그러나 작동하지 않습니다 ... 다음 작업을 수행 할 수있는 기대했다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

주행 거리계는 .goToNumber() 방법 - .stop() 또는 destroy() 만있는 것으로 나타납니다.

유일한 실용적인 접근법은 주행 거리계를 새 DOM 요소로 바꾸고 나서 초기화하는 것입니다.

이 시도 :

$(function() { 
    var c = $('#counter4').hide(), 
     counter; 
    $('#submit').click(function(){ 
     var counter_start = parseInt($('#counter_start').val()) || 1; 
     var counter_end = parseInt($('#counter_end').val()) || 0; 
     var counter_start_digits = counter_start.toString().length; 
     var counter_end_digits = counter_end.toString().length; 
     var padding = []; 
     if(counter_end_digits > counter_start_digits) { 
      for(var i=counter_start_digits+1; i<=counter_end_digits; i++) { 
       padding.unshift('0'); 
      } 
     } 
     if(counter) { 
      counter.remove(); 
     } 
     counter = c.clone().insertAfter(c).show().jOdometer({ 
      counterStart: padding.join('') + counter_start, 
      counterEnd: counter_end || false, 
      delayTime: parseInt($('#delay_time').val()) || 1000, 
      increment: parseInt($('#increment').val()) || 1, 
      speed: 0, 
      formatNumber: true, 
      spaceNumbers: 0, 
      widthDot: 10 
     }); 
    }); 
}); 

검증되지 않은

Answer 2

event.stopPropagation();을 사용하여 이벤트 실행을 중지 할 수 있습니다.