javascript - clearInterval() 不工作

标签 javascript scope setinterval clearinterval

<分区>

Possible Duplicate:
JS - How to clear interval after using setInterval()

我有一个函数，它使用 setInterval 每 500 毫秒更改一些文本的 font-family(我这样做只是为了练习 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>

最佳答案

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

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

off.onclick = function() {
    clearInterval(intervalId);
};

关于javascript - clearInterval() 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14666924/

上一篇：javascript - CSS 缩放和正方形中心裁剪图像

下一篇：javascript - 正则表达式 [任意数字]

相关文章：

javascript - HTML 中的自定义音频皮肤

javascript - 在成功回调之前修改 JSONP 结果

javascript - 每 10 秒替换一次 <div> 内容不起作用

javascript - 试图停止最后一项的 setInterval 循环

javascript - onBlur 杀死 onClick 但如果使用 setTimeout 则不会

javascript - 在 Intern 中加载 Leadfoot 模块会产生错误

JavaScript : The global variables value cannot be changed

c# - 访问封闭范围之外的 lambda 表达式

javascript - 将私有(private)变量转换为公共(public)变量

javascript - 动画功能停止在随机位置