Meteor:如何在onRendered()中创建clearInterval()onDestroyed()

Question

我有一个倒计时功能每秒运行,所以我提供setInterval().移动到另一个模板后,间隔功能继续运行.如何摧毁它onDestroyed().下面的代码将帮助您理解.

<template name="Home">
    <h4>{{timeremaining}}</h4>
</template>


Template.Home.helpers({
  timeremaining : function(){
    return Session.get('timeremaining');
  }
});

Template.Home.onRendered(function () {

      // time functions begin
      var end_date = new Date(1476337380000); // I am getting timestamp from the db.

      var run_every_sec = setInterval(function () {

        var current_date = new Date();
        var remaining = end_date.getTime() - current_date.getTime();

        var oneDay = 24*60*60*1000;
        var diffDays = Math.round(Math.abs(remaining/oneDay));

        console.log(remaining); // am getting this log in every template.

        if (remaining > 0) {
          //set remaining timeLeft
          Session.set('timeremaining',diffDays + ' Days ' + (Math.abs(end_date.getHours()-current_date.getHours())).toString() + ' Hrs ' + (Math.abs(end_date.getMinutes()-current_date.getMinutes())).toString() + ' Min ' + (60 - end_date.getSeconds()-current_date.getSeconds()).toString() + ' Sec ')
        } else {
          clearInterval(run_every_sec);
        }

      }, 1000);
      //time functions end



}.bind(this));

Template.Home.onDestroyed(function () {
  clearInterval(run_every_sec); // Here I cant remove this time interval
});

我们可以宣布run_every_sec为全局函数.如果是这样如何通过end_date.我不认为end_date在内部声明是明智的想法,run_every_sec因为它来自db.

Answer 1

如果将间隔存储在文件范围内,如Repo建议的那样,如果模板一次有多个实例,则会出现问题:两个实例都将使用相同的run_every_sec变量.在这种情况下,您需要在模板实例上存储间隔,该间隔可以在this内部访问,onRendered并且onDestroyed:

Template.Home.onRendered(function () {
    this.run_every_sec = setInterval(/* ... */);
});

Template.Home.onDestroyed(function () {
    clearInterval(this.run_every_sec);
});

这样,模板的每个实例都有自己的run_every_sec属性.

Answer 2

你应该在"onRendered"之外声明"run_every_sec".

所以不是这样的:

Template.Home.onRendered(function () {

      // time functions begin
      var end_date = new Date(1476337380000); // I am getting timestamp from the db.

      var run_every_sec = setInterval(function () {

..做这个:

var run_every_sec;

Template.Home.onRendered(function () {

      // time functions begin
      var end_date = new Date(1476337380000); // I am getting timestamp from the db.

      run_every_sec = setInterval(function () {

然后它将在"onDestroyed"中可用