在 Javascript 中遇到“setInterval/clearInterval”问题答案

【问题标题】：Having issues with "setInterval/clearInterval" in Javascript在 Javascript 中遇到“setInterval/clearInterval”问题
【发布时间】：2014-05-26 06:12:51
【问题描述】：

所以我有这个按钮：

<input name="start" type="button" value="Go!" onclick="activate()" />

后跟这个javascript：

var timerID_;
function activate() {
    timerID_ = setInterval(someFunction, 300);
}

所以这个功能工作正常，直到我尝试停止间隔。所以我做了一个停止按钮：

<input name="pause" type="button" value="Stop" onclick="pause()" />

随附的 javascript（在同一脚本中）：

function pause() {
    clearInterval(timerID_);
}

但是，当我按下按钮时，这不起作用。 THIS 有效，但是，我只是将“pause()”的主体放入 onclick 属性中：

<input name="stop" type="button" value="Stop" onclick="clearInterval(timerID_)" />

正如我所愿，第二个“停止”按钮暂停了间隔。有谁知道这是为什么？

编辑：这是“someFunction”（不确定是否有帮助）。本质上是什么：http://spreeder.com。我接受用户（文本）输入，并在显示框中逐字显示。

function someFunction() {
    var text = document.getElementById('userInput').value;
    var newText = text.split(" ");
    if (i == newText.length || newText[i] == undefined)
        pause();
    else {
        document.getElementById('display').innerHTML = newText[i];
        i++;
    }
}

另外：我使用 pause() 时遇到的错误； 未捕获的类型错误：对象不是函数

【问题讨论】：

timerID_ 变量的作用域是什么？
@V31 刚刚添加，抱歉，它是全球性的
显示您的完整代码。是这样吗？
@undefined 我不知道，我只是通过浏览器查看页面
你的代码必须工作，检查你的函数 someFunction。

标签： javascript

【解决方案1】：

发生这种情况的原因是浏览器将使用页面上存在的任何表单控件的名称创建变量。因此，如果您有这样的按钮：

<input name="pause" type="button" value="Stop" onclick="pause()" />

浏览器将创建一个名为pause 的变量，您可以使用它来访问此input，但它会屏蔽（隐藏）您之前声明的pause() 函数。因此，当您的事件处理程序尝试调用pause() 时，它将尝试“调用”您的input 对象，这根本不是一个函数。

如您所见，一个解决方案是让函数的名称与控件的名称不同。更好的解决方案是使用不显眼的 JavaScript。这不会使您免于确保控件名称和函数名称不同，但它应该使您的设计更简洁并减少此类问题。

【讨论】：

【解决方案2】：

name 属性不能与 JavaScript 函数的名称相同。我最初做的是：

<input name="pause" type="button" value="Stop" onclick="pause()" />

如果您将name 更改为name="stop" 之类的其他名称，则不会出现错误。我相信这是因为编译器会将name 属性视为对象，而onclick 函数会首先处理该属性。

【讨论】：