Why does my method print "Seconds: NAN"

Question

I am having trouble debugging the increment and tick methods of my Clock class. The seconds property of Clock should be incremented by 1 every second, but instead seconds is throwing a NaN error.

The goal of increment is to increment the seconds on the Clock instance by 1 each time it is called. Tick calls the increment method every second to make this possible.

function Clock() {
  this.seconds = 0;
}

Clock.prototype.increment = function() {
  this.seconds = this.seconds + 1;
  console.log('Seconds: ' + this.seconds);
};

Clock.prototype.tick = function() {
  setInterval(this.increment, 1000);
};

var timex = new Clock();

timex.tick();

score 0 · Answer 1 · answered Feb 15 '17 at 21:47

0

this is the window when you call it with setTimeout.

setInterval(this.increment.bind(this), 1000);

answered Feb 15 '17 at 21:47

epascarello

204,599
20
195
236

score 0 · Accepted Answer · edited May 23 '17 at 11:53

0

The issue is that within your setInterval handler, this no longer points to your Clock object, but to the global namespace. The easiest solution is just to bind this to this.increment:

Clock.prototype.tick = function() {
  setInterval(this.increment.bind(this), 1000);
};

See also: Javascript setInterval and `this` solution

edited May 23 '17 at 11:53

Community

1
1

answered Feb 15 '17 at 21:48

Kevin Ji

10,479
4
40
63

Please don't answer duplicate questions. Just vote to close as a duplicate. – Heretic Monkey Feb 15 '17 at 21:50
@MikeMcCaughan Just voted to close, but it's easier for the OP to also have a solution. – Kevin Ji Feb 15 '17 at 21:51
...which they'd get from the duplicate. Or, for that matter, a simple comment. By answer the question, you reduce the possibility of deleting the question. – Heretic Monkey Feb 15 '17 at 21:53

Why does my method print "Seconds: NAN"

2 Answers2