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>
试一试»