如何停止setInterval调用

Question

我有两个HTML按钮。 第一个按钮启动以下JavaScript函数：

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

效果很好。 我希望第二个按钮结束setInterval。 我这样尝试过：

function stop(){
    clearInterval(refresh);
}

不起作用 如果我在函数外部定义了“ refresh”变量，它就可以工作，但是当我想要启动它时，便无法启动它，它会自动启动。 这两个函数在单独的.js文件中定义。

救命！

Answer 1

您需要在外部声明它并分开分配。 在内部设置间隔：

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

然后停止：

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

Answer 2

refresh仅限于generations()的范围

您必须进行全局refresh或将其作为参数传递给stop()

Answer 3

在您的代码中，“刷新”变量仅在其所位于的函数中是本地的。 如果您以这种方式保留它，则应执行以下操作：

var refresh;

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

function stop(){
    clearInterval(refresh);
}

Answer 4

Javascript范围

Javascript提供了两种不同的作用域 ，第一种称为本地作用域 ，第二种称为全局作用域 。 范围定义了其他功能对变量的访问量。 实质上是这样的：

• var关键字在当前作用域声明一个变量。 在函数内部，这是局部作用域，在函数外部，这是全局作用域。
• 从那时起，只能在该范围内访问该变量。
• 本地作用域仅在一个功能内。 只能在该函数内部访问局部范围内的变量，并且在完成运行后将其删除。
• 全局范围在所有功能之内。 它可以通过所有功能访问，并且仅在关闭浏览器选项卡/窗口（或杀死Javascript进程）时删除。

注意，通常我们喜欢在局部范围内调用局部变量 ，在全局范围内调用全局变量 。

在你的代码中

您声明的变量refresh是局部变量，因为您在generations函数中内联声明了它。 因此，它只能在该功能范围内访问，其他任何人都不能访问。 这意味着stop功能无法使用它。

如果希望通过stop可以访问refresh ，则需要全局作用域-即需要在函数外部声明刷新。 这意味着代码中的所有其他功能都可以对其进行读取/写入。

新代码的外观示例（这可以解决您的问题）：

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

要记住的一件事是，您必须在重新初始化间隔之前清除间隔。

将refresh变量保留在外部范围内，以便您也可以引用它。

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

function stop(){
    clearInterval(refresh);
}