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

jOdometer似乎只有一個.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();停止運行事件。