引子
js的setTimeout方法用處比較多,通常用在頁面重繪了、延遲執行了等等,但是很多javascript新手對setTimeout的用法還是不是很了解,雖然我學習和應用javascript已經兩年多了,但是對setTimeout方法,有時候也要查閱資料,今天對js的setTimeout方法做一個系統地總結,
setInterval與setTimeout的區別
說道setTimeout,很容易就會想到setInterval,因為這兩個用法差不多,但是又有區別,今天一起總結了吧!
setTimeout
定義和用法:setTimeout()方法用于在指定的毫秒數后呼叫函式或計算運算式,
語法:setTimeout(code,millisec)
引數:code (必需):要呼叫的函式后要執行的 JavaScript 代碼串,millisec(必需):在執行代碼前需等待的毫秒數, 提示:setTimeout() 只執行 code 一次,如果要多次呼叫,請使用 setInterval() 或者讓 code 自身再次呼叫 setTimeout(),
setInterval
setInterval() 方法可按照指定的周期(以毫秒計)來呼叫函式或計算運算式,
setInterval() 方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉,由 setInterval() 回傳的 ID 值可用作 clearInterval() 方法的引數,
語法:setInterval(code,millisec[,"lang"])
引數:code 必需,要呼叫的函式或要執行的代碼串,millisec 必須,周期性執行或呼叫 code 之間的時間間隔,以毫秒計,
回傳值:一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值,
區別
通過上面可以看出,setTimeout和setinterval的最主要區別是:
setTimeout只運行一次,也就是說設定的時間到后就觸發運行指定代碼,運行完后即結束,如果運行的代碼中再次運行同樣的setTimeout命令,則可回圈運行,(即 要回圈運行,需函式自身再次呼叫 setTimeout())
而 setinterval是回圈運行的,即每到設定時間間隔就觸發指定代碼,這是真正的定時器,
setinterval使用簡單,而setTimeout則比較靈活,可以隨時退出回圈,而且可以設定為按不固定的時間間隔來運行,比如第一次1秒,第二次2秒,第三次3秒,
我個人而言,更喜歡用setTimeout多一些!
setTimeout的用法
讓我們一起來運行一個案例,首先打開記事本,將下面代碼貼入,運行一下效果!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> haorooms博客示范網頁 </font> </h1>
<p> 請等三秒!</p>
<script>
setTimeout("alert('對不起, haorooms博客要你等候多時')", 3000 )
</script>
</body>
</html>
頁面會在停留三秒之后彈出對畫框!這個案例應用了setTimeout最基本的語法,setTimeout不會自動重復執行!
setTimeout也可以執行function,還可以不斷重復執行!我們再來一起做一個案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var x = 0
function countSecond()
{
x = x+1
document.haorooms.haoroomsinput.value=https://www.cnblogs.com/KillBugMe/p/x
setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>
<form name="haorooms">
<input type="text" name="haoroomsinput"value="https://www.cnblogs.com/KillBugMe/p/0" size=4 >
</form>
<script>
countSecond()
</script>
</body> </html>
你可以看到input文本框中的數字在一秒一秒的遞增!所以,setTimeout也可以制作網頁中的時間跳動!
沒有案例,學習起來不會很快,我們再來一起做一個例子,計算你在haorooms某個頁面的停留時間:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x=0
y=-1
function countMin()
{ y=y+1
document.displayMin.displayBox.value=https://www.cnblogs.com/KillBugMe/p/y
setTimeout("countMin()",60000)
}
function countSec()
{ x = x + 1
z =x % 60
document.displaySec.displayBox.value=https://www.cnblogs.com/KillBugMe/p/z
setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留時間是: </td>
<td>
<form name=displayMin>
<input type=text name=displayBox value=https://www.cnblogs.com/KillBugMe/p/0 size=4 >
分
秒,
<script>
countMin()
countSec()
</script>
