如何停止setInterval调用

Question

I have two HTML buttons. First button starts the JavaScript function below:

function generations(){
    var refresh = setInterval(function(){ mutation() }, 1000);
}

Works great. I want the second button to end the setInterval. I tried like this:

function stop(){
    clearInterval(refresh);
}

Doesn't work. It works if I define the "refresh" variable outside of the function, but then I can't start it when I want to, it just starts automatically. The two functions are defined in a separate .js file.

Help!

Answer 1

You need to declare it outside and separate the assignment. Set the interval inside:

var refresh;
function generations(){
    refresh = setInterval(function(){ mutation() }, 1000);
}

And stop:

function stop(){
    if (refresh) { 
       clearInterval(refresh); 
    }
}

Answer 2

refresh is confined into the scope of generations()

You have to make refresh global or let it be passed to stop() as parameter

Answer 3

In your code the "refresh" variable is local only to the function it is located. If you to keep it in this manner you should do something like this:

var refresh;

function generations(){
    refresh = setInterval(function(){ mutation() }, 1000);
}

function stop(){
    clearInterval(refresh);
}

Answer 4

Scopes in Javascript

There are two different scopes available in Javascript, the first of which is called local scope and the second of which is called global scope . A scope defines how much access other functions have to a variable. Here's how it works (in essence):

• The var keyword declares a variable at the current scope. Inside a function this is the local scope, outside a function this is the global scope.
• From that point, that variable can only be accessed from within that scope.
• Local Scope is only within one function. A variable in local scope can only be accessed from within that function, and is deleted once it finishes running.
• Global Scope is within all functions. It is accessible by all functions, and is only deleted when the browser tab / window is closed (or the Javascript process is killed).

Note that commonly we like to call variables in the local scope local variables and variables in the global scope global variables .

In your code

The variable that you declare, refresh , is a local variable because you declare it inline in the generations function. Thus, it is only accessible in the scope of that function, and not to any others. This means that it is not able to be used by the stop function.

If you if you want refresh to be accessiable by stop , you need global scope - ie refresh needs to be declared outside of a function. This means that it is accessible for read / write by all other functions in the code.

An example of how your new code would look (this solves your problem):

var refresh; //Declare refresh in the global scope, but don't assign it a value
function generations(){
    refresh = setInterval(function(){ mutation() }, 1000); //Assign a value
}
function stop(){
    clearInterval(refresh); //Read that value
}

Answer 5

One thing to keep in mind is you have to clear your interval before reinitializing it.

Keep the refresh variable in outside scope so you can reference it as well.

var refresh;
function generations(){
    if( refresh ){ 
      stop()
    }
    refresh = setInterval(function(){ mutation() }, 1000);
}

function stop(){
    clearInterval(refresh);
}