显示一个接一个的JS倒计时

Question

我试图在第一次倒计时结束后显示第二次倒计时。我正在使用流星。这是计时器：

sec = 5
@timer = setInterval((->
  $('#timer').text sec--
  if sec == -1
    $('#timer').fadeOut 'fast'
    sec=
    timer
  return
), 1000)

这就是我所说的 渲染模板时，我调用setTimeout并显示倒计时

Template.selector.rendered = ->
  window.setTimeout(startGame, 5000)
  timer

比赛开始时，我需要第二次倒计时。我像这样管理它：

sec = 5
sw = 0
@timer = setInterval((->
  $('#timer').text sec--
  if sec == -1
    if sw == 0
      sw = 1
      sec = 20
    else if sw == 1
  clearInterval timer
  return
), 1000)

但必须有更好的方法。

Answer 1

如果您计划使用许多计时器，您可以制作一个实现该目标的对象。以下是here的示例，您可以根据案例using custom events进行调整：

ReactiveTimer = (function () {

    // Constructor
    function ReactiveTimer(interval) {
        this._dependency = new Tracker.Dependency;
        this._intervalId = null;

        if(_.isFinite(interval))
            this.start(interval);

    };

    ReactiveTimer.prototype.start = function(interval){
        var _this = this;

        this._intervalId = Meteor.setInterval(function(){
            // rerun every "interval"
            _this._dependency.changed();
        }, 1000 * interval);
    };

    ReactiveTimer.prototype.stop = function(){
        Meteor.clearInterval(this._intervalId);
        this._intervalId = null;
    };

    ReactiveTimer.prototype.tick = function(){
        this._dependency.depend();
    };

    return ReactiveTimer;
})();