Can't stop setInterval with clearInterval

Question

Been playing with this in a fiddle for 4 hours now and cant find a solution...

HTML:

Real Time Data: <input type="checkbox" id="dataStream"/>

js:

var chartInt = null;
$("#dataStream").change(function() {
    if(this.checked) {
        var chartInt = setInterval(function() { alert('checked') }, 7000);
    } else {
        clearInterval(chartInt);
        chartInt = null;
        alert('unchecked');
    }
});

Note: because clearInterval is not working you need to click on "run" in the jsfiddle to get it to stop after clicking the checkbox, you have 7 seconds between alerts...

Here is a link to the jsfiddle: http://jsfiddle.net/5udtC/5966/

Thanks!

Answer 1

Don't redefine the variable in the local scope

var chartInt = null;
$("#dataStream").change(function() {
    if(this.checked) {
        chartInt = setInterval(function() {  // no "var" here
            alert('checked') 
        }, 7000);
    } else {
        clearInterval(chartInt);
        alert('unchecked');
    }
});