Javascript Meteor:如何在onRendered（）中创建clearInterval（）onDestroyed（）

我有一个每秒运行的倒计时函数，所以我提供了

setInterval（）

。在我移动到另一个模板后，interval函数继续运行。如何销毁它

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
});

{{timeremaining}}
Template.Home.helpers({
剩余时间：函数（）{
return Session.get（'timeremaining'）；
}
});
Template.Home.onRendered（函数（）{
//时间函数开始
var end_date=new date（1476337380000）；//我正在从数据库获取时间戳。
var run_every_sec=setInterval（函数（）{
var current_date=新日期（）；
var remaining=end_date.getTime（）-当前_date.getTime（）；
var One Day=24*60*60*1000；
var diffDays=数学轮（数学绝对值（剩余/一天））；
console.log（剩余）；//我在每个模板中都获取此日志。
如果（剩余>0）{
//设置剩余时间限制
Session.set（'timeremaining'，diffDays++'Days'+（Math.abs（end_date.getHours（）-current_date.getHours（）））.toString（）+'Hrs'+（Math.abs（end_date.getMinutes（）-current_date.getMinutes（））.toString（）+（60-end_date.getSeconds（）-current_date.getSeconds（））.toString（）+'Sec'））
}否则{
clearInterval（每秒钟运行一次）；
}
}, 1000);
//时间函数结束
}.约束（这个）；
Template.Home.onDestroyed（函数（）{
clearInterval（每秒钟运行一次）；//这里我不能删除这个时间间隔
});

我们可以将

每秒运行一次
声明为全局函数。如果是，如何传递
结束日期
。我认为在
每秒运行一次
中声明
结束日期是不明智的，因为它来自数据库。
你应该在“onRendered”之外声明“每秒运行一次”

因此，与此相反：

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”中可用。如果您像Repo建议的那样将间隔存储在文件范围中，那么如果一次有多个模板实例，您将遇到问题：两个实例将使用相同的
每隔一秒运行一次
变量。在这种情况下，您需要将间隔存储在模板实例上，该实例可以作为
this
内部
onRendered
和
onestroyed
访问：

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

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

这样，模板的每个实例都有自己的
每隔\u秒运行一次
属性。
您应该使用Meteor的setInterval和clearInterval来确保它们在光纤内运行。你可以在这里找到更多信息

var intervalID

Template.myTemplate.onRendered(function() {
    intervalID = Meteor.setInterval(function() {
        //do something
    }, 1000)
})

Template.myTemplate.onDestroyed(function() {
    Meteor.clearInterval(intervalID)
})