Interval still firing but inaccessible

Question

I have a variable created with setInterval called cycle1. It is created with setInterval inside of a prototyped function to an object called eGi, which is the same as $_. After creating it, it still fires, but is inaccessible to the rest of the script and the console. When I try to clear this interval from another prototyped function, nothing happens.

eGi.prototype.startGame = function() {
    //other code...
    if (somethingOrOther) { 
        var somethingElse = confirm("start interval?");
        if (somethingElse) {
            this.cycle1 = setInterval($_.cycle,toMS(INTERVAL_SECONDS));
        }
    } else {
        this.cycle1 = setInterval($_.cycle,toMS(INTERVAL_SECONDS));
    }
};

then when i try and stop it in another function

eGi.prototype.gameOver = function() {
    clearInterval(this.cycle1);
    //other code...
    if (restart) {
        $_.startGame();
    } else {
        $_.mainMenu();
    }
};

It never gets cleared, and seems to be created again in the calling of $_.startGame. I can't even access it from the Chrome console using $_.cycle1 or the eGi instance variable, egi.cycle1. The strange thing is, this works for accessing any other variable that belongs to my eGi object:

var eGi = function(console,cDom,ctxt,game,devMode) {
    $_ = this;
    this.game = game;
    this.cDom = cDom; //specifically, these objects control the canvas' DOM
    this.ctxt = ctxt; //and the CanvasRenderingContext2D
}
eGi.prototype.mainMenu = function() {
    this.ctxt.fillText("Hello",250,250); //this works just fine
    //etc
};

Why isn't it being cleared?

Full code/game here.

score 1 · Accepted Answer · answered Sep 05 '12 at 05:35

1

It's a nice game...

The problem is you are referring to "this" inside gameover which doesn't contain reference to cycle1 (undefined).

Instead you have to store "cycle1" as part of an object which can be referenced from your other function (in this case gameover)

Making variables as global is not a good thing. Instead you can store the "cycle1" as part of eGi or any such namespace or object.

Refer here (working code): JSFiddle implementation

Javascript code (start and stop are input buttons)

var eGi = {};

$('#start').click(function start() {
var somethingElse = confirm("start interval?");
if (somethingElse) {
    eGi.cycle1 = setInterval(function(){
        console.log('Running...');
    },1000);
}
});

$('#stop').click(function stop(){
      clearInterval(eGi.cycle1);
    });

answered Sep 05 '12 at 05:35

Sandeep G B

3,957
4
26
43

I'm not quite sure what you mean, as these functions **are** all part of same object, `eGi`. This method of accessing `eGi`'s member variables works for all other objects, just not the interval. – Polyov Sep 05 '12 at 12:55
"this" doesn't refer to eGi always; it refers to the object which invoked the function. I believe you are familiar with the concept of scope & closures in javascript. Well explained article: http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ (http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) – Sandeep G B Sep 05 '12 at 14:00
I'm not sure that's the case, as all prototyped functions to `eGi` are called from `$_`, which is the same as `eGi`. – Polyov Sep 05 '12 at 19:23
FYR, you can "console.log(this)" in both the functions and check the values. – Sandeep G B Sep 06 '12 at 04:49

Interval still firing but inaccessible

1 Answers1