如何停止 setInterval 调用答案

【问题标题】：How to stop a setInterval call如何停止 setInterval 调用
【发布时间】：2016-02-28 18:08:23
【问题描述】：

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

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

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

function stop(){
    clearInterval(refresh);
}

不起作用。如果我在函数之外定义“刷新”变量，它会起作用，但是当我想启动它时，我无法启动它，它只是自动启动。这两个函数定义在一个单独的 .js 文件中。

救命！

【问题讨论】：

标签： javascript function settimeout

【解决方案1】：

你需要在外面声明它并分开赋值。设置里面的区间：

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

然后停下来：

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

【讨论】：

你是个天才 :) 谢谢。我建立了一个简单的遗传算法来绘制图像：crashoverride.site88.net/rich.html

【解决方案2】：

refresh 被限制在generations() 的范围内

您必须将refresh 设为全局或让它作为参数传递给stop()

【讨论】：

【解决方案3】：

在您的代码中，“刷新”变量仅对它所在的函数是本地的。如果你要以这种方式保存它，你应该这样做：

var refresh;

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

function stop(){
    clearInterval(refresh);
}

【讨论】：

【解决方案4】：

Javascript 中的作用域

Javascript 中有两种不同的作用域，第一种称为局部作用域，第二种称为全局作用域 .范围定义了其他函数对变量的访问权限。以下是它的工作原理（本质上）：

var 关键字在当前范围内声明一个变量。函数内部 this 是局部作用域，函数外部 this 是全局作用域。
从那时起，该变量只能在该范围内访问。
Local Scope 仅在一个函数内。局部范围内的变量只能在该函数内访问，一旦运行完毕就会被删除。
全局范围在所有函数中。它可以被所有功能访问，并且只有在浏览器选项卡/窗口关闭（或 Javascript 进程被终止）时才会被删除。

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

在您的代码中

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

如果您希望refresh 可以被stop 访问，则需要全局范围——即刷新需要在函数之外声明。这意味着它可以被代码中的所有其他函数读取/写入。

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

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
}

【讨论】：

【解决方案5】：

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

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

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

function stop(){
    clearInterval(refresh);
}

【讨论】：