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 。 我認為在run_every_sec聲明end_date是run_every_sec因為它來自db。

Answer 1

如果將間隔存儲在文件范圍內，如Repo建議的那樣，如果模板一次有多個實例，則會出現問題：兩個實例都將使用相同的run_every_sec變量。 在這種情況下，您需要在模板實例上存儲間隔，可以在onRendered和onDestroyed訪問this實例：

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”中可用

Answer 3

您應該使用Meteor的setInterval和clearInterval來確保它們在光纖內運行。 您可以在https://docs.meteor.com/api/timers.html找到更多信息。

var intervalID

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

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