這篇文章裏我們看一下javascript 中的如何使用setTimeout(), clearTimeout(), setInterval() 和 clearInterval() 幾個與時間設置有關的函數。使用這些函數可以設置定時器和延時任務,並且很方便。
- setTimeout()
windows.setTimeout()函數允許設定一定的延時,來執行所要執行的任務。設置的任務將在函數被調用後的數秒之後被執行。調用方法如下:
setTimeout ( expression, timeout );
expression 是到達延時時間後要執行的javascript 代碼
setTimeout 函數將返回數字類型的延時標誌,這個返回值會被clearTimeout函數調用
簡單的例子:
<input type="button" name="clickMe" value="Click me and wait!"
onclick="setTimeout('alert(\'Surprise!\')', 5000)"/>
再點擊按鈕5秒後彈出信息:"Surprise!"
一個較完整的例子:
<script type="text/javascript">
function setToRed ( )
{
document.getElementById("colourButton").style.color = "#FF0000";
setTimeout ( "setToBlack()", 2000 );
}
function setToBlack ( )
{
document.getElementById("colourButton").style.color = "#000000";
}
</script>
<input type="button" name="clickMe" id="colourButton" value="Click me and wait!" onclick="setToRed()"/>
從上面的例子可以看到,按鈕被點擊後,按鈕文字變成紅色持續兩秒鐘,隨後變成黑色字體。
<script type="text/javascript">
var alertTimerId = 0;
function alertTimerClickHandler ( )
{
if ( document.getElementById("alertTimerButton").value == "Click me and wait!" )
{
// Start the timer
document.getElementById("alertTimerButton").value = "Click me to stop the timer!";
alertTimerId = setTimeout ( "showAlert()", 3000 );
}
else
{
document.getElementById("alertTimerButton").value = "Click me and wait!";
clearTimeout ( alertTimerId );
}
}
function showAlert ( )
{
alert ( "Too late! You didn't stop the timer." );
document.getElementById("alertTimerButton").value = "Click me and wait!";
}
</script>
<input type="button" name="clickMe" id="alertTimerButton" value="Click me and wait!" onclick="alertTimerClickHandler()"/>
- clearTimeout()
有的時候在延時程序完成之前要結束延時任務,會用到clearTimeout,其調用方式爲:
clearTimeout ( timeoutId );
timeoutId 是setTimeout函數被調用後返回的延時標誌
下面的例子當用戶點擊按鈕3秒鐘後,會彈出對話框信息,但是在此期間用戶可以再次點擊按鈕結束延時,阻止窗口的彈出。
<script type="text/javascript">
var alertTimerId = 0;
function alertTimerClickHandler ( )
{
if ( document.getElementById("alertTimerButton").value == "Click me and wait!" )
{
// Start the timer
document.getElementById("alertTimerButton").value = "Click me to stop the timer!";
alertTimerId = setTimeout ( "showAlert()", 3000 );
}
else
{
document.getElementById("alertTimerButton").value = "Click me and wait!";
clearTimeout ( alertTimerId );
}
}
function showAlert ( )
{
alert ( "Too late! You didn't stop the timer." );
document.getElementById("alertTimerButton").value = "Click me and wait!";
}
</script>
<input type="button" name="clickMe" id="alertTimerButton" value="Click me and wait!" onclick="alertTimerClickHandler()"/>
- setInterval() 函數
和setTimeout()函數相似,setInterval函數的定義方法爲setInterval(expression, interval);當使用setTimeout函數做如下操作時,可以考慮用setInterval函數替換
setTimeout ( "doSomething()", 5000 );
function doSomething ( )
{
// (do something here)
setTimeout ( "doSomething()", 5000 );
}
setInterval方法:
setInterval ( "doSomething()", 5000 );
function doSomething ( )
{
// (do something here)
}
當需要提供連續精確的時間或時間間隔時setInterval將是最好的選擇
- clearInterval()
和clearTimeout函數一樣,通過setInterval返回的ID值,調用clearInterval方法結束一個setInterval,下面是一個可運行的setInterval和clearInterval函數簡單實例:
<script type="text/javascript">
var wooYayIntervalId = 0;
function wooYayClickHandler ( )
{
if ( document.getElementById("wooYayButton").value == "Click me!" )
{
// Start the timer
document.getElementById("wooYayButton").value = "Enough already!";
wooYayIntervalId = setInterval ( "wooYay()", 1000 );
}
else
{
document.getElementById("wooYayMessage").innerHTML = "";
document.getElementById("wooYayButton").value = "Click me!";
clearInterval ( wooYayIntervalId );
}
}
function wooYay ( )
{
if ( Math.random ( ) > .5 )
{
document.getElementById("wooYayMessage").innerHTML = "Woo!";
}
else
{
document.getElementById("wooYayMessage").innerHTML = "Yay!";
}
setTimeout ( 'document.getElementById("wooYayMessage").innerHTML = ""', 500 );
}
</script>
<div id="wooYayMessage" style="height: 1.5em; font-size: 2em; color: red;"></div>
<input type="button" name="clickMe" id="wooYayButton" value="Click me!" onclick="wooYayClickHandler()"/>
引用網址:http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/