Question

我正在创建一个简单的应用程序，我开始倒数计时器，当计时器到期时，它会显示一个模板。在该模板上，我回答了一系列问题，然后将答案提交给数据库。

目前，我的倒数计时器只是用JavaScript编写的：

    Template.start.events({
    'click .startTimer': function() {

        $("#timer").text();

        (function() {
            var wait = 2;
            var countSpan = $('#timer span');

            function countdown() {

                wait -= 1;

                if (wait > 0) {
                    countSpan.text(wait);
                    setTimeout(countdown, 1000);
                    $('.startTimer').prop("disabled", true);
                    Session.set('done', false);

                } else {
                    Session.set('done', true);
                    $('.startTimer').prop("disabled", false);
                    countSpan.text("Complete checkup then keep working!");

                }
            }
            setTimeout(countdown, 1000);

        }());
    }
});

问题是，当我离开打印倒计时的页面时，它不会持续存在。

如何在我的应用程序中制作一个倒数计时器，以便在我导航到应用程序中的其他页面时继续进行？

Answer 1

这个伪想法怎么样：

一旦您离开页面（某些种类的标签模糊），请保存 Session中的变量与当前时间戳 Session.set("leavingAt", new Date())
返回页面（等效标签焦点）后，使用当前时间戳保存新变量 Session.set("returningAt", new Date())
在两者之间添加/减少差异（取决于您的实施方式）并更新倒数计时器

Answer 2

您可以使用Meteor方法在服务器上启动计时器。

// call method from template
Meteor.call('startTimer', function() {
  // handle timer finished logic
});

//server
Meteor.methods({
  startTimer: function() {
    Meteor.setTimeout(function() {
      //do something
      return;
    }, ms)
  }
});

我认为即使您使用的是其他模板，您的回调仍会被触发，但我不是百分百肯定。

Answer 3

我最终使用meteorhacks：async来实现这一目标。这是代码：

    function delayedMessge(callback) {
        Meteor.setTimeout(function() {
            callback(null, true)
        }, 1000)
    }

    var wrappedDelayedMessage = Async.wrap(delayedMessge);

    Meteor.methods({
        'abc': function() {
            var response = wrappedDelayedMessage();
            return response;
        }
    });

    Template.start.events({

    'click .start': function() {

        Meteor.call('abc', function(error, response){
            var timeup = response
            //I'm setting this session to true, then in a helper
            //that isn't shown here, I'm getting the Session and
            //which displays the template
            Session.set('done', timeup)
        });
      }
    })

azium的回答让我朝着正确的方向前进，但并不是很正确。我最终在一个方法中运行了一个setTimeout，但是出现了问题。与Meteor.call关联的回调会立即执行，但是mehod中的setTimeout还没有完成。使用meteorhacks：async包，Meteor.call回调函数会一直等到setTimeout触发。

当我浏览应用程序的其他页面时，如何创建倒计时器？

3 个答案: