Clear interval from another function

Question

I want to trigger a setInterval() based on a success of a particular function.

function myCountComplete(){
   //do something
   count++;
   if(count > 10){
      var myVar = setInterval(function(){ setColor() }, 300);
   }
}

function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

How can I clear the myVar interval when a button is clicked?

$("#stop").click(function(){
    clearInterval(myVar);
});

Answer 1

You can always set it on the global scope, i.e.

window.myTimer = setInterval(function(){ setColor() }, 300);

$("#stop").click(function(){
    clearInterval(window.myTimer);
});

Answer 2

"window" is not necessary, and my opinion is that is bad practice to use it. Just remove "var" and scope will be automatically global.

http://www.w3schools.com/js/js_scope.asp

Answer 3

This is a scope issue.
See What is the scope of variables in JavaScript?

Basically, declare the myVar into a scope available in both case. For instance:

function myCountComplete(){
//do something
count++;
if(count > 10){
   window.myVar = setInterval(function(){ setColor() }, 300);
}
}

$("#stop").click(function(){
    clearInterval(window.myVar);
});