Question

所以这是我的问题

我正在尝试创建一个计时器，并且为每个创建的客户端创建了计时器，所以它实际上是1 Div（这是实际代码的一小部分，我的问题只有计时器）

<div class="timer">
  <input src="/images/playButton.png" type="image" class="btnPlay" />
  <div class="clock">
      <span class="min">00</span>
      <span class="s">:</span>
      <span class="sec">00</span>
  </div>

这里是这个计时器背后的javascript，使它全部工作

$j('.btnPlay').click(function () {
    var clock = $j(this).parent().children('.clock');

    function pad(val) {
        return val > 9 ? val : "0" + val;
    }

    timerObject = (function startTimer() {
        clock.children('.sec').text(pad(++sec % 60));
        clock.children('.min').text(pad(parseInt(sec / 60, 10)));
    });
    //the 1000(milliseconds) means execute function every 1 second
    timer = setInterval(timerObject, 1000);


 }// end of play button if statement

现在这里是这个代码的主要问题，第一个计时器工作得很好，但由于某种原因，当我玩第二个计时器时，时间将从第一个计时器停止的地方开始，我知道有很多类似的问题，但大多数人使用2个不同的div为计时器，我被迫使用一个，任何建议或修复将受到高度赞赏，长期坚持这一点。

Answer 1

问题是您正在使用sec和timer的全局变量。要解决此问题，您可以使用jQuery的.data()和.removeData()函数，以便每个计时器都有自己的一组值。

function pad(val) {
    return val > 9 ? val : "0" + val;
}

$j(function($) {
    $('.btnPlay').click(function() {
        var $timer = $(this).closest('.timer'),
            $clock = $timer.find('.clock');
        $timer.data('sec', 0);
        if (!$timer.data('interval')) {
            $timer.data('interval', setInterval(function() {
                var sec = $timer.data('sec') + 1;
                $clock.children('.sec').text(pad(sec % 60));
                $clock.children('.min').text(pad(Math.floor(sec / 60)));
                $timer.data('sec', sec);
            }, 1000));
        }
    });
});

要停止计时器的间隔，您可以使用：

clearInterval($timer.data('interval'));
$timer.removeData('interval');

注意：通过对所有计时器使用单个间隔，可以提高效率。

您可能不在乎，但由于setInterval() 保证每秒都会被调用，因此计时器不是很准确。以下更准确：

        $timer.data('start', Date.now());
        if (!$timer.data('interval')) {
            $timer.data('interval', setInterval(function() {
                var sec = Math.floor((Date.now() - $timer.data('start')) / 1000);
                $clock.children('.sec').text(pad(sec % 60));
                $clock.children('.min').text(pad(Math.floor(sec / 60)));
            }, 1000));
        }

有多个计时器使用javascript单独工作

1 个答案: