Call Javascript Object Method with SetInterval()

Question

Here is a fiddle.

I'm trying to create a countdown object that uses moment.js (a plugin that I prefer over using Date())

var Countdown = function(endDate) {
    this.endMoment = moment(endDate);

    this.updateCountdown = function() {
        var currentMoment, thisDiff;

        currentMoment = moment();
        thisDiff = (this.endMoment).diff(currentMoment, "seconds");

        if (thisDiff > 0)
            console.log(thisDiff);
        else {
            clearInterval(this.interval);
            console.log("over");
        }
    }

    this.interval = setInterval(this.updateCountdown(), 1000);
}

I then create a instance of the countdown like so:

var countdown = new Countdown("January 1, 2014 00:00:00");

However the function only seems to run one time. Any ideas? Should I be using setTimeout() instead?

that doesn't seem to reference the object (throws an error 'Cannot call method 'diff' of undefined): http://jsfiddle.net/zCFr5/2/ — dougmacklin, Aug 15 '13 at 23:40
You need to do something like this http://jsfiddle.net/zCFr5/3/ — fbynite, Aug 15 '13 at 23:43
ah okay i see, create a local variable that stores this. do you want to write it as an answer so i can pick yours? — dougmacklin, Aug 15 '13 at 23:46

score 16 · Answer 1 · edited Dec 05 '16 at 13:15

16

You should pass a reference to function, not the result of its execution. Also, you need some additional "magic" to call a method this way.

var me = this;
this.interval = setInterval(function () {
    me.updateCountdown();
}, 1000);

edited Dec 05 '16 at 13:15

answered Aug 15 '13 at 23:32

kirilloid

14,011
6
38
52

Instead of saving a reference to `this`, you can use `Function.bind`. http://stackoverflow.com/a/6065221/139010 – Matt Ball Aug 15 '13 at 23:33
Yes, but it doesn't work in older browsers. And no framework for that implied in question. – kirilloid Aug 15 '13 at 23:34
Doesn't seem to work still, here is the updated fiddle: http://jsfiddle.net/zCFr5/1/ – dougmacklin Aug 15 '13 at 23:34
The answer I linked addresses that: `Function.bind` is quite simple to shim. – Matt Ball Aug 15 '13 at 23:36

fbynite · Accepted Answer · 2013-08-15T23:59:38.770

You can either store your this context as a local variable like the following:

var Countdown = function(endDate) {
  var self = this;
  this.endMoment = moment(endDate);

  this.updateCountdown = function() {
      var currentMoment, thisDiff;

      currentMoment = moment();
      thisDiff = (self.endMoment).diff(currentMoment, "seconds");

      if (thisDiff > 0)
          console.log(thisDiff);
      else {
          clearInterval(self.interval);
          console.log("over");
      }
  }

  this.interval = setInterval(this.updateCountdown, 1000);
}

Or you can just use your variables directly such as:

var Countdown = function(endDate) {
  var endMoment = moment(endDate);

  this.updateCountdown = function() {
      var currentMoment, thisDiff;

      currentMoment = moment();
      thisDiff = (endMoment).diff(currentMoment, "seconds");

      if (thisDiff > 0)
          console.log(thisDiff);
      else {
          clearInterval(interval);
          console.log("over");
      }
  }

  var interval = setInterval(this.updateCountdown, 1000);
}

I prefer the second approach - fiddle

Call Javascript Object Method with SetInterval()

2 Answers2