javascript - Emberjs 倒计时 - 不可阻挡

Question

嘿嘿

我对用 Ember 编写的倒计时有一个小问题。更准确地说，是在计数器达到 0 时停止计数器。

首先...我正在使用

Ember 版本

DEBUG: Ember                    : 1.12.0

我创建了一个“服务”类，其中包含一些简单的方法来处理倒计时过程。

interval: function() {
  return 10; // Time between polls (in ms)
}.property().readOnly(),

totalTime: function() {
  return 5000; // Total Time (in ms)
}.property(),

timeDiff: 0,
timeLeft: function() {
  return Math.floor((this.get('totalTime') - this.get('timeDiff')) / 1000);
}.property('timeDiff'),

hasFinished: function() {
  return this.get('timeLeft') === 0;
}.property('timeLeft'),


// Schedules the function `f` to be executed every `interval` time.
schedule: function(f) {
  return Ember.run.later(this, function() {
    f.apply(this);
    this.set('timer', this.schedule(f));
  }, this.get('interval'));
},


// Starts the countdown, i.e. executes the `onTick` function every interval.
start: function() {
  this.set('startedAt', new Date());
  this.set('timer', this.schedule(this.get('onTick')));
},


// Stops the countdown
stop: function() {
  Ember.run.cancel(this.get('timer'));
},


onTick: function() {
  let self = this;
  self.set('timeDiff', new Date() - self.get('startedAt'));
  if (self.get('hasFinished')) {
    // TODO: Broken - This should stop the countdown :/
    self.stop();
  }
}

CountDown with Ember.run.later()

我正在 Controller 内开始倒计时(播放操作)。倒计时按其应有的方式倒计时，但它只是没有停止:(

onTick() 中的 self.stop() 调用根本不执行任何操作...

我尝试通过 Controller 中的其他操作来停止倒计时，并且它应该正常工作:/

有什么想法可以解决这个问题吗？

干杯迈克尔

Answer 1

我已经根据您提供的代码编写了一个倒计时服务，该代码允许您启动、重置和停止倒计时。我的代码假设您使用的是 Ember CLI，但我已经包含了一个 JSBin，它考虑了较旧的 ES5 语法。

app/services/countdown.js

import Ember from 'ember';

const { get, set, computed, run } = Ember;

export default Ember.Service.extend({
  init() {
    set(this, 'totalTime', 10000);
    set(this, 'tickInterval', 100);
    set(this, 'timer', null);
    this.reset();
  },

  remainingTime: computed('elapsedTime', function() {
    const remainingTime = get(this, 'totalTime') - get(this, 'elapsedTime');
    return (remainingTime > 0) ? remainingTime : 0;
  }),

  hasFinished: computed('remainingTime', function() {
    return get(this, 'remainingTime') === 0;
  }),

  reset() {
    set(this, 'elapsedTime', 0);
    set(this, 'currentTime', Date.now());
  },

  start() {
    this.stop();
    set(this, 'currentTime', Date.now());
    this.tick();
  },

  stop() {
    const timer = get(this, 'timer');

    if (timer) {
      run.cancel(timer);
      set(this, 'timer', null);
    }
  },

  tick() {
    if (get(this, 'hasFinished')) {
      return;
    }

    const tickInterval = get(this, 'tickInterval');
    const currentTime = get(this, 'currentTime');
    const elapsedTime = get(this, 'elapsedTime');
    const now = Date.now();

    set(this, 'elapsedTime', elapsedTime + (now - currentTime));
    set(this, 'currentTime', now);
    set(this, 'timer', run.later(this, this.tick, tickInterval));
  }
});

我已经制作了此实现的示例 available on JSBin供你玩耍。