动态更新间隔-jQuery或Javascript

我的代码中有两个“秒表”（我可能会添加更多）。这是我目前在下面使用的代码，它工作得很好。但是我真的想把大部分代码放到一个函数中，这样我就不会一遍又一遍地重复同样的代码了

当我尝试这样做时，我可以让它工作-我想这是因为我正在将

stopwatchTimerId

和

stopwatch2TimerId

传递到函数中，它可能是通过引用传递的

如何减少此处的代码重复量

var stopwatchTimerId = 0;
var stopwatch2TimerId = 0;

$('#stopwatch').click(function () {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');

        clearInterval(stopwatchTimerId);
    }
    else {
        $(this).addClass('active');

        stopwatchTimerId = setInterval(function () {
            var currentValue = parseInt($('#stopwatch-seconds').val()) || 0;
            $('#stopwatch-seconds').val(currentValue + 1).change();
        }, 1000);
    }
});

$('#stopwatch2').click(function () {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');

        clearInterval(stopwatch2TimerId);
    }
    else {
        $(this).addClass('active');

        stopwatch2TimerId = setInterval(function () {
            var currentValue = parseInt($('#stopwatch2-seconds').val()) || 0;
            $('#stopwatch2-seconds').val(currentValue + 1).change();
        }, 1000);
    }
});

---

如您所见，除了

stopwatchTimerId

和

$（“#秒表秒”）

（另一个是相同的变量，上面有2个）。您可以这样做（代码不是很好，您可以改进它）：

---

您可以这样做（代码不是很好，您可以改进它）：

---

这不会污染全局范围，也不需要做任何if-else语句。只需将数据选择器添加到新元素中：）

$（“#秒表秒表2”）。单击（函数（）{
var$element=$（此），
间隔=$element.data（'interval'）；
选择器=$element.data（'selector'）；；
if（$element.hasClass（'active'））{
$element.removeClass（'active'）；
如果（间隔）{
间隔时间；
}
}
否则{
$element.addClass（'active'）；
$element.data（'interval'，setInterval（函数）（）{
var currentValue=parseInt（$（选择器）.val（））|| 0；
$（选择器）.val（当前值+1）.change（）；
}, 1000));
}
});

这不会污染全局范围，也不需要执行任何if-else语句。只需将数据选择器添加到新元素中：）

$（“#秒表秒表2”）。单击（函数（）{
var$element=$（此），
间隔=$element.data（'interval'）；
选择器=$element.data（'selector'）；；
if（$element.hasClass（'active'））{
$element.removeClass（'active'）；
如果（间隔）{
间隔时间；
}
}
否则{
$element.addClass（'active'）；
$element.data（'interval'，setInterval（函数）（）{
var currentValue=parseInt（$（选择器）.val（））|| 0；
$（选择器）.val（当前值+1）.change（）；
}, 1000));
}
});

试试看

var arr=$.map（$（$div[id^=stopwatch]），函数（el，索引）{
el.onclick=手表；
返回0
});
功能表（e）{
var id=this.id；
var n=编号（id.split（/-/）[1]）；
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
净间隔（arr[n]）；
}否则{
$（此）.addClass（“活动”）；
arr[n]=setInterval（函数（）{
var currentValue=parseInt（$（“#”+id+“-seconds”）.val（））|0；
$（“#”+id+“-seconds”）.val（currentValue+1.change（）；
}, 1000);
}
};

秒表1
秒表2
试试看


var arr=$.map（$（$div[id^=stopwatch]），函数（el，索引）{
el.onclick=手表；
返回0
});
功能表（e）{
var id=this.id；
var n=编号（id.split（/-/）[1]）；
if（$（this）.hasClass（“活动”））{
$（此）.removeClass（“活动”）；
净间隔（arr[n]）；
}否则{
$（此）.addClass（“活动”）；
arr[n]=setInterval（函数（）{
var currentValue=parseInt（$（“#”+id+“-seconds”）.val（））|0；
$（“#”+id+“-seconds”）.val（currentValue+1.change（）；
}, 1000);
}
};

秒表1
秒表2
这真是太经典了！我喜欢这个解决方案！非常感谢，这是多么优雅的方式啊！我有一个问题-为什么你称它为
var$element
（带美元符号）而不是
var-element
？因为它是一个jquery包装器：）这是非常非常非常经典的！我喜欢这个解决方案！非常感谢，这是多么优雅的方式啊！我有一个问题-为什么称它为
var$element
（带美元符号）而不是
var-element
？因为它是一个jquery包装器：）
var stopwatchTimerId;
$('#stopwatch').click(function () {
        doStopWatch(1);
    });

    $('#stopwatch2').click(function () {
        doStopWatch(2);
    });

    var doStopWatch = function(option){
        var stopWatch = option===1?$('#stopwatch'):$('#stopwatch2');
        if (stopWatch.hasClass('active')) {
            stopWatch.removeClass('active');

            clearInterval(stopwatchTimerId);
        }
        else {
            stopWatch.addClass('active');
            stopwatchTimerId = setInterval(function () {
                var currentValue = option===1?(parseInt($('#stopwatch-seconds').val()) || 0):(parseInt($('#stopwatch2-seconds').val()) || 0);
                if(option===1)
                    $('#stopwatch-seconds').val(currentValue + 1).change();
                else 
                    $('#stopwatch2-seconds').val(currentValue + 1).change();
            }, 1000);
        }
    }

function stopwatch(id){
  $('#' + id).click(function () {
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');

        clearInterval(window[id]);
    }
    else {
        $(this).addClass('active');

        window[id] = setInterval(function () {
        var currentValue = parseInt($('#' + id + '-seconds').val()) || 0;
        $('#' + id + '-seconds').val(currentValue + 1).change();
    }, 1000);
}
});
}
$(function(){
  stopwatch("stopwatch");
  stopwatch("stopwatch2");
});

<input id="stopwatch" type="text" data-selector="#stopwatch-seconds"/>
<input id="stopwatch2" type"text" data-selector="#stopwatch2-seconds"/>

$('#stopwatch stopwatch2').click(function () {

    var $element = $(this),
        interval = $element.data('interval');
        selector = $element.data('selector');;
    if ($element.hasClass('active')) {
        $element.removeClass('active');

        if (interval) {
            clearInterval(interval);
        }
    }
    else {
        $element.addClass('active');

        $element.data('interval', setInterval(function () {


            var currentValue = parseInt($(selector).val()) || 0;
            $(selector).val(currentValue + 1).change();


        }, 1000));
    }
});