CODEWITHSUNDEEP
javascriptember.js
sufu90
sufu90

Reputation: 144

Emberjs Countdown - not stoppable

Heyho

I have a little issue with my countdown written in Ember. More precisely in stopping my counter when it hits 0.

First of all... I'm using

Ember Version

DEBUG: Ember                    : 1.12.0

I've created a 'service' Class with some simple methods to handle the countdown process.

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

I'm starting the countdown within my controller (play action). The countdown counts down as it should but it just doesn't stop :(

The self.stop() call in onTick() just doesn't do anything at all...

I tried to stop the countdown with an other action in my controller and that is working as it should :/

Any ideas how to solve that problem??

Cheers Michael

Upvotes: 0

Views: 662

Answers (1)

Jon Koops
Jon Koops

Reputation: 9301

I've taken the courtesy or writing a Countdown service based on the code you have provided that allows you to start, reset and stop the countdown. My code assumes you are using Ember CLI, but I have included a JSBin that takes older ES5 syntax into account.

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

I've made an example of this implementation available on JSBin for you to toy around with.

Upvotes: 1

Related Questions