SetTimeout vs. Ember.run.later in an ember app?

Question

Inside my handlebars template:

Today's date: {{currentDate}}
Current Time: {{currentTime}}

Inside my helpers:

Ember.Handlebars.registerBoundHelper 'currentDate', (option) ->
  moment().format('LL');

Ember.Handlebars.registerBoundHelper 'currentTime', (option) ->
  moment().format('h:mm:ss a');

How would I go about updating the currentTime to the view every 1 second?

I have read the Ember recommends Ember.run.later but I can't quite figure out where to put it and how to call it using this helper.

score 60 · Accepted Answer · edited Jun 13 '18 at 17:59

60

You can use Ember.run.later like you would normally use setTimeout

Ember.run.later((function() {
  //do something in here that will run in 2 seconds
}), 2000);

I'm not sure of the internals, but I know that integration testing Ember requires that you use run.later (if you don't the test code won't wait for the timeout to finish).

edited Jun 13 '18 at 17:59

bsegraves

980
13
22

answered Feb 02 '14 at 01:04

Toran Billups

27,111
40
155
268

score 12 · Answer 2 · edited Jun 20 '20 at 09:12

You won't want to add the timeout into the helper, you'll want to add it to a global variable and just do a diff from it. The reason you'll want to use Em.run.later is it will inject it into the run loop (part of what Toran was getting at). This is really important for testing.

Add the time to a global variable

App.ApplicationRoute = Em.Route.extend({
  setupController: function(controller, model){
    this._super(controller, model);
    this.startWatchingTime(controller);
  },
  startWatchingTime: function(controller){
    var self = this;
    controller.set('currentTime', moment());
    Em.run.later(function(){
      self.startWatchingTime(controller);
    }, 1000);
  }
});

Add it to the helper

Ember.Handlebars.helper('time-diff', function(date1, date2, format, options) {
  return date1.diff(date2, format);
});

send it into the helper

{{time-diff  controllers.application.currentTime anotherTime 'seconds'}}

http://emberjs.jsbin.com/UcUrIQa/1/edit

score 8 · Answer 3 · answered Jul 11 '16 at 23:54

you want to use Embers.run loop instead of going outside with setTimer.

The current (today) version of ember requires this format with context this (updating Toran Billups answer)

this._debouncedItem = Ember.run.later(this, () => {
   debugger;
}, 5000);

I highly recommend keeping a reference to the response of later() and cancelling it in the destroy hook

destroy() {
   this._super(...arguments);
   Ember.run.cancel(this._debouncedItem);
},

score 2 · Answer 4 · edited Nov 30 '15 at 09:17

2

You could make currentDate a regular property

currentDate: null,
currentTime: null

You can start this timer in the controller's constructor.

init: function () { 
  this.updateTimeProperty();
},
updateTimeProperty: function () {
  var _this = this;
  Ember.run.later(this, function() {
    _this.currentDate = moment().format('LL');
    _this.set('currentTime',  moment().format('h:mm:ss a');
    _this.updateTimeProperty());
  }, 1000);
}

edited Nov 30 '15 at 09:17

Giacomo1968

25,759
11
71
103

answered Feb 02 '14 at 01:10

Miguel Madero

1,948
13
21

Failing to use a setter will be problematic, it won't notify Ember observers that currentDate/currentTime have changed – Kingpin2k Sep 11 '14 at 00:41
goot catch, simple change – Miguel Madero Sep 14 '14 at 15:19

score 1 · Answer 5 · answered Feb 02 '14 at 01:22

I'm bit outdated Ember user, but I would do it like this hope there is a better solution.

App.CurrentTimeView = Ember.View.extend({
    template : Ember.Handlebars.compile("<span>{{view.currentTime}}</span>"),
    currentTime : null,
    init : function(){
        var view = this;
        view.set('currentTime', moment().format('h:mm:ss a'));
        setInterval((function(view){
            return function(){view.set('currentTime', moment().format('h:mm:ss a'));};
        })(view),1000);
    }
});

and in the template

{{view "App.CurrentTimeView"}}

To answer your question, Javascript has a single threaded execution (unless you use webworkers) which means it will do things one by one in a serial manner. When you use setInterval it will en-queue your function every x milliseconds into this main execution queue. setInterval uses the passed time to do its queuing. Ember run loops will kind of calculate bindings and other heavy things in each run loop, so at the end of the loop we are sure that out changes are there ready. There are hooks like Em.run.next to make sure those codes when being run will have the complete changes done in last run loop. Similarly when you pass a time to Em.run.later it will as well run after that much time and also supports a parameter to set this inside the function. Mostly when dealing with some variables or Model/Controller data inside the function.

In your case setInterval looks ok (for me).

http://jsfiddle.net/NQKvy/604/

SetTimeout vs. Ember.run.later in an ember app?

5 Answers5

Add the time to a global variable

Add it to the helper

send it into the helper

Linked