最新的Web开发教程
 

JavaScript计时事件


1
2
3
4
6
7
8
9
10
11
12

JavaScript可以在时间间隔来执行。

这就是所谓的定时事件。


计时事件

窗口对象允许代码执行指定的时间间隔。

这些时间间隔被称为定时事件。

使用JavaScript使用两个关键方法是:

  • setTimeout( function, milliseconds )
    执行功能,在等待的毫秒指定次数后。
  • setInterval( function, milliseconds )
    相同setTimeout()但连续地重复功能的执行。

setTimeout()setInterval()是HTML DOM Window对象的方法。


setTimeout()方法

window.setTimeout(function, milliseconds);

所述window.setTimeout()方法可以在没有窗口前缀被写入。

第一个参数是将要执行的功能。

第二参数表示执行前的毫秒数。

点击一个按钮。 等待3秒,页面会提示“你好”:

<button onclick="setTimeout(myFunction, 3000)">Try it</button>

<script>
function myFunction() {
    alert('Hello');
}
</script>
试一试»

如何停止执行?

所述clearTimeout()方法停止中指定的功能的执行setTimeout()

window.clearTimeout( timeoutVariable )

所述window.clearTimeout()方法可以在没有窗口前缀被写入。

clearTimeout()方法使用返回的变量setTimeout()

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

如果该功能尚未执行,您可以通过调用停止执行clearTimeout()方法:

上面同样的例子,但有一个附加的“停止”按钮:

<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>

<button onclick="clearTimeout(myVar)">Stop it</button>
试一试»

setInterval()方法

所述setInterval()方法重复在每个给定时间间隔的给定的功能。

window.setInterval(function, milliseconds);

所述window.setInterval()方法可以在没有窗口前缀被写入。

第一个参数是将要执行的功能。

所述第二参数表示每次执行之间的时间间隔的长度。

这个例子执行一个调用的函数"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( )方法可以在没有窗口前缀被写入。

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

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

如上面同样的例子,但我们已经增加了“停止时间”按钮:

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

<button onclick="clearInterval(myVar)">Stop time</button>

<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
试一试»

例子

更多示例

另一个简单的计时

具有定时事件创建的时钟