内置函数 clearInterval 不工作 Javascript

Question

我正在学习 setTimeout、setInterval、clearInterval 函数。

现在我尝试编写这样的代码，但是 clearInterval 不起作用。代码：

<h2>Hello!</h2>
<p>i am a paragraph</p>
<button onclick="setInterval(messageOnInterval, 110)">Click Me</button>
<button onclick="clearInterval(messageOnInterval)">Stop</button>
<script>
    function messageOnInterval() {
        
        var p=document.createElement('p');
            p.innerHTML = "i am a paragraph";
            document.body.appendChild(p);
        
    }
</script>

提前感谢您的帮助！

Answer 1

setInterval returns调用clearInterval时需要用到的一个值。您没有将函数作为 arg 传递，而是先前调用 setInterval

返回的值

id = setInterval(messageOnInterval, 110)
clearInterval(id)

在您的情况下，您应该在 script 中声明一个 JS 变量并将其用作您的 ID。

注意：如果您多次按下按钮，这将无法正常工作，因为您会丢失较旧的 setInteval 返回值。

Answer 2

您应该将 setInterval 分配给一个变量以获取它的数字格式的句柄，然后您可以调用 clearInterval 来清除该计时器。

您不能将函数分配给 clearInterval。

所以应该是这样的：

<script>
    function messageOnInterval_Impl() {
        var p = document.createElement('p');
        p.innerHTML = "i am a paragraph";
        document.body.appendChild(p);

    }

    var intervalHandle;
    function setMessageOnInterval() {
        intervalHandle = setInterval(function () {
            messageOnInterval_Impl();
            // ... 
        }, 110)
    }
</script>

<h2>Hello!</h2>
<p>i am a paragraph</p>
<button onclick="setMessageOnInterval()">Click Me</button>
<button onclick="clearInterval(intervalHandle)">Stop</button>

内置函数 clearInterval 不工作 Javascript

Inbuilt function clearInterval is not working Javascript

html

javascript

clearinterval