Javascript setInterval scoping issue

Question

I have a class I am attempting to use to manage a session on the client side, it looks like this:

var sessionmanager;

sessionmanager = (function() {

  sessionmanager.name = 'sessionmanager';

  function sessionmanager(timeout, action) {
    if (action != null) {
      this.action = action;
    } else {
      this.action = null;
    }
    if (timeout != null) {
      this.timeout = timeout * 60;
    } else {
      this.timeout = 0;
    }
  }

  sessionmanager.prototype.run = function() {
    return window.setInterval(this.tick, 1000);
  };

  sessionmanager.prototype.sessionExpired = function() {
    if (this.action != null) {
      window.navigate("timeout.asp");
    }
  };

  sessionmanager.prototype.setTimeout = function(timeout) {
    return this.timeout = timeout;
  };

  sessionmanager.prototype.tick = function() {
    this.timeout -= 1;
    if (this.timeout < 1) {
      return sessionExpired();
    }
  };

  return sessionmanager;

})();

However when I debug inside the tick function that is called from within the setInterval callback I get this.timeout = NaN

I am guessing I scoped something incorrectly? Help please? I am new to javascript...

pimvdb · Accepted Answer · 2012-07-04 17:35:09Z

6

If setInterval calls the function it doesn't set the this value as you may expect. Calling this.tick() does set it correctly, but just passing the function and having it called in another way does not. You have to bind the this value to what you want:

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

This is available on newer browsers but there are shims available.

Also, you probably meant this.sessionExpired(), as that's where it's defined. return doesn't make much sense there since setInterval does not care about the return value.

answered Jul 4, 2012 at 17:35

pimvdb

155k80 gold badges313 silver badges358 bronze badges

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

3 Comments

hugomg Over a year ago

You could also use the "that" trick: var that = this; return setInterval(function(){ return that.tick()}, 1000)

FlyingStreudel Over a year ago

I ended up using the 'that' solution, as I need support for older browsers (curse you asp!) but I appreciate the help!

pimvdb Over a year ago

@missingno: True. Here it's just a matter of fixing the this value so I think .bind is a neat solution.

Eugen Rieck · Accepted Answer · 2012-07-04 17:31:13Z

0

Have you ever set the timeout? You might want

sessionmanager.timeout=0;

somwhere in the class definition.

answered Jul 4, 2012 at 17:31

Eugen Rieck

65.6k10 gold badges75 silver badges97 bronze badges

3 Comments

FlyingStreudel Over a year ago

I have this.timeout = 0 in the constructor?

pimvdb Over a year ago

An instance has a .timeout value, not the constructor itself.

pimvdb Over a year ago

@Flying Streudel: No, your code is correct there :) The suggestion to set sessionmanager.timeout does not make much sense.

Tim · Accepted Answer · 2015-12-08 00:03:25Z

0

In ES7 Javascript you can do the following:

window.setInterval(::this.tick, 1000);

The double colon syntax :: is a shortcut to .bind(this).

answered Dec 8, 2015 at 0:03

Tim

8,3233 gold badges51 silver badges84 bronze badges

Collectives™ on Stack Overflow

Javascript setInterval scoping issue

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related