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

您可以使用event.stopPropagation(); 停止運行事件。

Answer 2

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
        });
    });
});

未經測試