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

}）;

METEOR - 在特定时间显示加载程序和运行方法

2 个答案: