动态更新间隔 - jQuery 或 Javascript

Question

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

不过，当我尝试这样做时，我可以让它工作 - 我认为这是因为我将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 和 $('#stopwatch-seconds') 之外，每个代码中基本上都是相同的代码（另一个带有 2 的相同变量）。

Answer 1

这不会污染全局范围，也不需要做任何 if-else 语句。只需将data-selector添加到新元素中即可:)

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

Answer 2

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

Answer 3

你可以做这样的事情（代码不是很好，你可以改进它）：

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

<</div> div class="one_answers">

尝试

var arr = $.map($("div[id^=stopwatch]"), function(el, index) {
  el.onclick = watch;
  return 0
});
function watch(e) {
  var id = this.id;
  var n = Number(id.split(/-/)[1]);
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    clearInterval(arr[n]);
  } else {
    $(this).addClass("active");
    arr[n] = setInterval(function() {
      var currentValue = parseInt($("#" + id + "-seconds").val()) || 0;
      $("#" + id + "-seconds").val(currentValue + 1).change();
    }, 1000);
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="stopwatch-0">stopwatch1</div>
<input type="text" id="stopwatch-0-seconds" />
<div id="stopwatch-1">stopwatch2</div>
<input type="text" id="stopwatch-1-seconds" />