METEOR - ローダーを表示して特定の時間にメソッドを実行する

Question

ローダーサークルを1から100％にして、その間にいくつかのメソッドを実行したいと思っています。

loader circle

シナリオは次のとおりです。

• がページをロードし、カウントを開始します。 カウンタが50％の時にカウントを停止し、最初の方法を実行したとき、結果が残っているところからカウントを開始すると、
• が90％までカウントされ、2番目の方法が実行されます。

私はMeteor.setIntervalでonCreatedを使って何かしようとしていましたが、これを行う正しい方法であるかどうかはわかりません。

誰かに私にこれにアプローチする方法のアイデアを教えてもらえますか？ ありがとう！

Answer 1

特定のニーズに応じてこれを行う方法はいくつかありますが、多くのReactive Timerパッケージのうち1つを使用したい場合もあります。

ここでは、Meteor API（パッケージなし）のみを使用する1つの実例を示します。注意していただきたいのは、実際にローダーサークルのアニメーションを組み込んでいないということです。

テンプレート定義

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

}）;