JavaScript setInterval() 方法操作实践

 

setInterval() 方法在每个给定的时间间隔重复给定的函数。

 

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不带 window 前缀来写。

 

第一个参数是要执行的函数。

 

第二个参数每个执行之间的时间间隔的长度。

 

本例每秒执行一次函数 "myTimer"（就像数字手表）。

 

实例

显示当前时间：

 

var myVar = setInterval(myTimer, 1000);

 

function myTimer() {

    var d = new Date();

    document.getElementById("demo").innerHTML = d.toLocaleTimeString();

}

 

一秒有 1000 毫秒。

 

如何停止执行？

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

 

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

 

clearInterval() 方法使用从 setInterval() 返回的变量：

 

myVar = setInterval(function, milliseconds);

clearInterval(myVar);

实例

类似上例，但是我们添加了一个“停止时间”按钮：

 

<p id="demo"></p>

 

<button onclick="clearInterval(myVar)">停止时间</button>

 

<script>

var myVar = setInterval(myTimer, 1000);

 function myTimer() {

    var d = new Date();

    document.getElementById("demo").innerHTML = d.toLocaleTimeString();

}

</script>