METEOR - 在特定时间显示加载器和运行方法答案

【问题标题】：METEOR - Show loader and run methods at specific timeMETEOR - 在特定时间显示加载器和运行方法
【发布时间】：2017-02-24 20:40:55
【问题描述】：

我想建立一个从 1% 到 100% 的加载程序循环，同时运行一些方法。

loader circle

场景是：

加载页面并开始计数。当计数器处于 50% 时暂停计数并运行第一种方法，当我得到结果时，从我离开的地方开始计数。
计数到 90% 并运行第二种方法。

我在 onCreated 上尝试使用 Meteor.setInterval 进行一些操作，但我不确定这是否是正确的方法。

有人能给我一些关于如何解决这个问题的想法吗？谢谢！

【问题讨论】：

标签： meteor meteor-blaze

【解决方案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();
  },
});

如果您有任何问题，请告诉我。

【讨论】：

感谢您的回答，看起来简单易懂。我已经弄清楚了，我的方法与您解释的非常相似。我将添加我的代码并在下面回答。

【解决方案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();
    }
});

});

【讨论】：