Question

请参阅下面的代码。定时器工作，但分钟减少的速度比秒数快。在秒数达到0之前，分钟数不应该减少。如何使分钟在秒数达到0后减少分数？

(function($) {
  function timer(time, update, complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
      var now = time - (new Date().getTime() - start);
      if (now <= 0) {
        clearInterval(interval);
        complete();
      } else update(Math.floor(now / 1000));
    }, 0);
  }


  timer(
    300000,
    function(timeleft) {
      var min = Math.round(timeleft / 60);
      var sec = Math.round(timeleft / 5);

      $('.timer').html(min + " minutes " + sec + " seconds");
    }
  );
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class=timer></span>

Answer 1

如果您将计时器设置为一分钟，则无法在59秒开始。
使用setTimeout代替setInterval

使用timeInSeconds % 60计算秒数不要将计时器（在我们的案例中为setTimeout）设置为0。使用性能友好的内容，例如1000 / 60

(function($) {

  /**
   * timer - Countdown seconds from a provided ms value
   * @param {Number} time - time in MS
   * @param {function} update - Callback - returns time in seconds
   * @param {function} complete - Callback - returns time in seconds on complete
   */
  function timer(time, update, complete) {

    var start = +new Date(),
      timeout, now, sec;

    (function tick() {

      now = time - (+new Date() - start);
      sec = Math.ceil(now / 1000);

      if (now <= 0) {
        // STOP ticking!
        clearTimeout(timeout);  
        // COMPLETE - Execute callback function (if provided)
        if (complete && typeof complete === "function") complete(sec);
      } else {
        timeout = setTimeout(tick, 1000 / 60); // Recursive ticks...
      }

      // UPDATE - Execute callback function (if provided)
      if (update && typeof update === "function") update(sec);

    })(); // start ticking... (Thank you Timeout!)

  }

  timer(
    60000,
    function(timeInSeconds) {
      var min = Math.floor(timeInSeconds / 60),
          sec = timeInSeconds % 60;
      $('.timer').html(min + " minutes " + sec + " seconds");
    }, function(timeInSeconds) {
      console.log("DONE! " + timeInSeconds);
    }
  );

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class=timer></span>

Answer 2

我认为你的问题是关于Math.round（），那么使用ceil而不是它呢？

编辑：也许你也希望减1，因为当timeleft为59或更低时，分钟变为1。

(function($) {
  function timer(time, update, complete) {
    var start = new Date().getTime();
    var interval = setInterval(function() {
      var now = time - (new Date().getTime() - start);
      if (now <= 0) {
        clearInterval(interval);
        complete();
      } else update(Math.floor(now / 1000));
    }, 0);
  }


  timer(
    300000,
    function(timeleft) {
      var min = Math.ceil(timeleft / 60 ) - 1;
      var sec = Math.round(timeleft / 5);

      $('.timer').html(min + " minutes " + sec + " seconds");
    }
  );
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class=timer></span>

简单的Jquery倒计时问题

2 个答案: