實際上,setTimeout和setInterval的語法相同。它們都有兩個參數,一個是將要執行的代碼字符串,還有一個是以毫秒爲單位的時間間隔,當過了那個時間段以後就將執行那段代碼。javascript
不過這兩個函數仍是有區別的,setInterval在執行完一次代碼以後,通過了那個固定的時間間隔,它還會自動重複執行代碼,而setTimeout只執行一次那段代碼。html
雖然表面上看來setTimeout只能應用在on-off方式的動做上,不過能夠經過建立一個函數循環重複調用setTimeout,以實現重複的操做java
這兩種方法可能看起來很是像,並且顯示的結果也會很類似,不過二者的最大區別就是,setTimeout方法不會每隔5秒鐘就執行一次showTime函數,它是在每次調用setTimeout後過5秒鐘再去執行showTime函數。這意味着若是showTime函數的主體部分須要2秒鐘執行完,那麼整個函數則要每7秒鐘才執行一次。而setInterval卻沒有被本身所調用的函數所束縛,它只是簡單地每隔必定時間就重複執行一次那個函數。ide
若是要求在每隔一個固定的時間間隔後就精確地執行某動做,那麼最好使用setInterval,而若是不想因爲連續調用產生互相干擾的問題,尤爲是每次函數的調用須要繁重的計算以及很長的處理時間,那麼最好使用setTimeout。函數
setInterval 案例orm
<html>htm
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
<button onclick="int=window.clearInterval(int)">Stop interval</button>
</body>
</html>
---------------------------------------------------------------------------
setTimeout案例
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="顯示計時的消息框!" onClick = "timedMsg()">
</form>
<p>點擊上面的按鈕。5 秒後會顯示一個消息框。</p>
</body>
</html>