javascript - 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()方法 - no.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
        });
    });
});

未经测试