An Accurate Javascript Timer

Question

I've been trying to make an accurate JavaScript timer using Backbone JS this is as far as I've gotten:

It works apart from the the complete event fires twice when it shouldn't, any ideas on what I need to do to fix/improve it?

Console Output:

"tick 10 1"
"tick 10 2"
"tick 10 3"
"tick 10 4"
"tick 10 5"
"tick 10 6"
"tick 10 7"
"tick 10 8"
"tick 10 9"
"complete 10 10"
"complete 10 11"

Put your code in your question.

epascarello
– epascarello

2014-01-02 19:36:26 +00:00
Commented Jan 2, 2014 at 19:36 — epascarello
– epascarello, Commented Jan 2, 2014 at 19:36
Looks like you call start twice if I am reading it right.

epascarello
– epascarello

2014-01-02 19:36:51 +00:00
Commented Jan 2, 2014 at 19:36 — epascarello
– epascarello, Commented Jan 2, 2014 at 19:36

rgthree · Accepted Answer · 2014-01-02 19:37:44Z

1

You're calling start twice, once in your TimerView.initialize and once again after you instantiate it, meaning you have two concurrent setTimeout loops occurring (and, you're timer is moving twice as fast):

var Timer = Backbone.Model.extend({
  /* ... */
});

var TimerView = Backbone.View.extend({
  /* ... */
  initialize: function () {
    this.model.on('tick', function(e){console.log('tick '+e.steps+' '+e.count);}, this);
    this.model.on('complete', function(e){console.log('complete '+e.steps+' '+e.count);}, this);
    this.model.start(); // <-- One here
  }
});

var timer = new Timer();
var timerView = new TimerView({model: timer});
timer.start();  // <-- Another here

answered Jan 2, 2014 at 19:37

rgthree

7,28319 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jani Hartikainen · Accepted Answer · 2014-01-02 19:37:31Z

1

You're calling start() twice. Once after creating the model and view, and once inside your view initialize function.

answered Jan 2, 2014 at 19:37

Jani Hartikainen

43.4k11 gold badges70 silver badges87 bronze badges

Comments

Rob Sedgwick · Accepted Answer · 2014-01-02 19:50:03Z

1

var TimerView = Backbone.View.extend({
    model: Timer,
    tagName: 'p',
    className: 'timer',
    initialize: function () {
        this.model.on('tick', function(e){console.log('tick '+e.steps+' '+e.count);}, this);
        this.model.on('complete', function(e){console.log('complete '+e.steps+' '+e.count);}, this);
        /* this.model.start(); - don't need this */
    }
});

edited Jan 2, 2014 at 19:50

answered Jan 2, 2014 at 19:38

Rob Sedgwick

5,2364 gold badges22 silver badges36 bronze badges

Collectives™ on Stack Overflow

An Accurate Javascript Timer

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related