clearInterval() is not stopping setInterval() - Fi

Question

I am working on a modification of tamper data that will allow me to send the HTTP request/responses it observes to a server. So far, that functionality has been implemented correctly. The next step is to automate this process, and I wish to use a toolbarmenu button of type 'checkbox' to toggle this functionality on and off.

So far I have this bit of code in the .XUL:

<toolbarbutton id="tamper.autosend" label="&tamper.toolbar.autosend;" type="checkbox" oncommand="oTamper.toggleTimer();"/>

And this function in the main driver of my extension:

toggleTimer : function() {
 var checked = document.getElementById('tamper.autosend').checked;

 var consoleService = Components.classes["@mozilla.org/consoleservice;1"].getService(Components.interfaces.nsIConsoleService);

 consoleService.logStringMessage(checked);

 if (checked) {
        var interval = window.setInterval(function(thisObj) { thisObj.sendResults(true); }, 1000, this);
 }

 else {
        window.clearInterval(interval);
 }
}

Using the consoleService I see that the value of 'checked' is indeed correct. I believe the problem lies with how I am calling clearInterval, but I'm not exactly sure how to remedy it.

Any help is greatly appreciated!

Answer 1

You have defined interval inside if try to declare your variable on the start

var interval = 0;
toggleTimer : function() {
 var checked = document.getElementById('tamper.autosend').checked;

 var consoleService = Components.classes["@mozilla.org/consoleservice;1"].getService(Components.interfaces.nsIConsoleService);

 consoleService.logStringMessage(checked);

 if (checked) {
        interval = window.setInterval(function(thisObj) { thisObj.sendResults(true); }, 1000, this);
 }

 else {
        window.clearInterval(interval);
 }
}

Answer 2

You're storing the interval in a local variable; the value is lost after the function returns, next time you attempt to clearInterval an undefined variable. Store the interval in i.e. a global variable instead:

 if (checked) {
        window.interval = window.setInterval(function(thisObj) { thisObj.sendResults(true); }, 1000, this);
 }

 else {
        window.clearInterval(interval);
 }

Answer 3

Your doing it wrong, each time you want to set the new interval you should clear it first

clearInterval(intervalID);

console.log('reset timer');

intervalID = setInterval(function () {
    console.log('tick');
}, refreshInterval);

Answer 4

Ofcourse, because interval is defined as a private variable. It is defined in the toggleTimer function and is destroyed when the function ends.

Use interval = window.setInterval() instead of var interval = window.setInterval() to define a global variable that is accessible later for clearInterval.

Below are some examples of the JavaScript variable scope. var is used to define a variable in the current scope. Leaving var always creates or changes a local variable.

function func1() {
    i = 1; // global
}
func1();
alert(i); // 1

var j = 2;
function func2() {
    var j = 3; // private
}
func2();
alert(j); // 2

k = 4;
function func3() {
    k = 5; // global
}
func3();
alert(k); // 5

var l = 6;
function func4() {
    l = 7; // global
}
func4();
alert(l); // 7

function func5() {
    var m = 6; // private
}
func5();
alert(m); // undefined