48

可能重复：
JS - 如何在使用 setInterval() 后清除间隔

我有一个函数，它font-family每 500 毫秒使用一次更改一些文本setInterval（我这样做只是为了练习 JavaScript。）通过单击“打开”按钮调用该函数，并且应该使用单独的按钮清除间隔，“离开”。但是，“关闭”按钮实际上并没有清除间隔，它只是继续。我怀疑这与范围有关，但我不确定如何以其他方式编写它。另外，我不想用 jQuery 来做这件事，因为毕竟我这样做是为了学习。

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button id="on" type="button" value="turn on">turn on</button>
    <button id="off" type="button" value="turn off">turn off</button>
</p>

<script>
var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");

var fontChange = function() {
    switch(text.className) {
        case "georgia":
            text.className = "arial";
            break;
        case "arial":
            text.className = "courierNew";
            break;
        case "courierNew":
            text.className = "georgia";
            break;      
    }
};

on.onclick = function() {
    setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(fontChange);
}; 
</script>
</body>
4

6 回答 6

77

setInterval返回一个 ID，然后您可以使用它来清除间隔。

var intervalId;
on.onclick = function() {
    if (intervalId) {
        clearInterval(intervalId);
    }
    intervalId = setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(intervalId);
};
于 2013-02-02T21:56:41.923 回答
6

该setInterval函数返回一个整数值，它是您创建的“计时器实例”的 id。

您需要传递的正是这个整数值clearInterval

例如：

var timerID = setInterval(fontChange,500);

然后

clearInterval(timerID);
于 2013-02-02T21:56:23.530 回答
2

我认为你应该这样做：

var myInterval
on.onclick = function() {
    myInterval=setInterval(fontChange, 500);
};

off.onclick = function() {
    clearInterval(myInterval);
};
于 2013-02-02T21:57:18.877 回答
2

您使用 clearInterval 不正确。

这是正确的用法：

设置定时器

var_name = setInterval(fontChange, 500);

接着

clearInterval(var_name);
于 2013-02-02T21:58:52.713 回答
1

setInterval方法返回一个间隔 ID，您需要将其传递给该 ID以clearInterval清除间隔。您正在传递一个不起作用的函数。这是一个工作 setInterval/clearInterval 的示例

var interval_id = setInterval(myMethod,500);
clearInterval(interval_id);
于 2013-02-02T21:56:20.893 回答
1

您的函数中有错误，但您应该做的第一件事是正确设置 body 标签：

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button id="on" type="button" value="turn on">turn on</button>
    <button id="off" type="button" value="turn off">turn off</button>
</p>
</body>

<script>....</script>

有时问题可能是，当脚本启动时，您只调用一次“var text”和其他 var。如果您对 DOM 进行更改，此静态解决方案可能是有害的。

所以你可以试试这个（这是更灵活的方法并使用函数参数，所以你可以在任何元素上调用函数）：

<body>
<p><span id="go" class="georgia">go</span> Italian</p>
<p>
    <button type="button" value="turn on"
         onclick=turnOn("go")>turn on</button>
    <button type="button" value="turn off"
         onclick=turnOff()>turn off</button>
</p>
</body>

<script type="text/JavaScript">
var interval;

var turnOn = function(elementId){
    interval = setInterval(function(){fontChange(elementId);}, 500);
};

var turnOff = function(){
    clearInterval(interval);
};

var fontChange = function(elementId) {
    var text = document.getElementById(elementId);
    switch(text.className) {
        case "georgia":
            text.className = "arial";
            break;
        case "arial":
            text.className = "courierNew";
            break;
        case "courierNew":
            text.className = "georgia";
            break;      
    }
};
</script>

你不再需要这个了，所以删除它：

var text = document.getElementById("go");
var on = document.getElementById("on");
var off = document.getElementById("off");

这是动态代码，意思是运行通用且不直接处理元素的 JS 代码。我喜欢这种方法，而不是为每个 div 元素定义一个自己的函数。;)

于 2013-02-03T00:53:58.040 回答