METEOR - 在特定時間顯示加載程序和運行方法

Question

我想構建一個加載程序圈從1到100％，同時運行一些方法。

loader circle

的情況是：

• 加載頁面並開始計數。 當計數器處於50％的暫停計數並運行第一種方法時，以及當我有結果從我離開的地方開始計數時。
• 計數直到90％並運行第二種方法。

我正在嘗試使用onCreated上的Meteor.setInterval，但我不確定它是否是正確的方法來執行此操作。

有人可以給我一些關於如何解決這個問題的想法嗎？ 謝謝！

Answer 1

有幾種方法可以根據您的具體需求來做到這一點，您甚至可能想要使用其中的許多Reactive Timer軟件包。

這是一個僅使用Meteor API（無包）的工作示例。請注意，我沒有真正加入裝載機圈動畫，因爲它不是問題的具體部分。

模板定義

<template name="loader"> 
    <h1>Loading...({{loadingPercentage}})</h1> 
</template> 

模板邏輯

Template.loader.onCreated(function() { 
    // used to update loader circle and triggering method invocation 
    this.elapsedTime = new ReactiveVar(0); 

    // handle for the timer 
    var timerHandle; 

    // starts a timer that runs every second that can be paused or stopped later 
    const startTimer =() => { 
    timerHandle = Meteor.setInterval(() => { 
     this.elapsedTime.set(this.elapsedTime.get() + 1); 
    }, 1000); 
    }; 

    // pauses/stops the timer 
    const pauseTimer =() => { 
    Meteor.clearInterval(timerHandle); 
    }; 

    // let's first start our timer 
    startTimer(); 

    // runs every second and triggers methods as needed 
    this.autorun(() => { 
    const elapsedTime = this.elapsedTime.get(); 

    // call methods based upon how much time has elapsed 
    if (elapsedTime === 5) { 
     pauseTimer(); 

     // call method and restart the timer once it completes 
     Meteor.call('methodOne', function(error, result) { 
     // do stuff with the result 

     startTimer(); 
     }); 
    } else if (elapsedTime === 9) { 
     pauseTimer(); 

     // call method and restart the timer once it completes 
     Meteor.call('methodOne', function(error, result) { 
     // do stuff with the result 

     // DO NOT RESTART TIMER! 
     }); 
    } 
    }); 
}); 

Template.loader.helpers({ 
    // helper used to show elapsed time on the page 
    loadingPercentage: function() { 
    return Template.instance().elapsedTime.get(); 
    }, 
}); 

讓我知道如果您有任何問題。

Answer 2

這就是我要怎樣做：

Template.onboarding.onCreated(function(){ 
var instance = this; 

instance.progress = new ReactiveVar(0); 


instance.autorun(function(){ 
    var loader = { 
     maxPercent: 100, 
     minPercent: instance.progress.get(), 

     start: function(){ 
      var self = this; 

      this.interval = Meteor.setInterval(function(){ 
       self.minPercent += 1; 

       if(self.minPercent >= self.maxPercent) { 
        loader.pause(); 
       } 

       if(self.minPercent == 25) { 
        loader.pause(); 
        Meteor.call('runMethodOne', (err,res)=>{ 
         if (!err) loader.resume(); 
        }); 
       } 

       if(self.minPercent == 75) { 
        loader.pause(); 

        Meteor.call('runMethodTwo', (err,res) =>{ 
         if(res) loader.resume(); 
        }); 
           } 
          } 
        }); 
       } 

       instance.progress.set(self.minPercent) 

       },50); 
      }, 

      pause: function(){ 
       Meteor.clearInterval(this.interval); 
       delete this.interval; 
      }, 
      resume: function(){ 
       if(!this.interval) this.start(); 
      } 
     }; 

     loader.start(); 
    } 
}); 

}）;