DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript window.setTimeout() 的詳細用法
JavaScript window.setTimeout() 的詳細用法
編輯:JavaScript基礎知識     

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> 示范網頁 </font> </h1>
<p> 請等三秒!</p>

<script>
setTimeout("alert('對不起, 要你等候多時')", 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=x
  setTimeout("countSecond()", 1000)
}
</script>
</head>
<html>
<body>

<form name="haorooms">
  <input type="text" name="haoroomsinput"value="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=y
  setTimeout("countMin()",60000)
}
function countSec()
{ x = x + 1
  z =x % 60
  document.displaySec.displayBox.value=z
  setTimeout("countSec()", 1000)
}
</script> </head>
<body>
<table> <tr valign=top> <td> 你在haorooms博客中的停留時間是: </td>
<td> 
<form name=displayMin>
  <input type=text name=displayBox value=0 size=4 >
</form> 
</td>
<td> 分 </td>
<td> 
<form name=displaySec> </td>
<td> <input type=text name=displayBox value=0 size=4 >
</form>
 </td>
<td> 秒。</td> </tr>
 </table>
<script>
countMin()
countSec()
</script>
</body>
</html>

怎麼樣,通過上面的例子,對setTimeout()的用法,相信你都了解了吧!

clearTimeout( )
我們再來一起看一下 clearTimeout( ),

clearTimout( ) 有以下語法 :  

clearTimeout(timeoutID)

要使用 clearTimeout( ), 我們設定 setTimeout( ) 時 , 要給予這 setTimout( ) 一個名稱 , 這名稱就是 timeoutID , 我們叫停時 , 就是用這 timeoutID 來叫停 , 這是一個自定義名稱 , 但很多人就以 timeoutID 為名。

在下面的例子 , 設定兩個 timeoutID, 分別命名為 meter1 及 meter2, 如下 :

timeoutID  ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)

使用這 meter1 及 meter2 這些 timeoutID 名稱 , 在設定 clearTimeout( ) 時 , 就可指定對哪一個 setTimeout( ) 有效 , 不會擾及另一個 setTimeout( ) 的操作。

下面請看 clearTimeout()的案例

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
x = 0
y = 0
function count1()
{ x = x + 1
  document.display1.box1.value = x
  meter1=setTimeout("count1()", 1000)
}
function count2()
{ y = y + 1
  document.display2.box2.value = y
  meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body> 
<p> </br>
<form name="display1">
  <input type="text" name="box1" value="0" size=4 >
  <input type=button value="停止計時" onClick="clearTimeout(meter1) " >
  <input type=button value="繼續計時" onClick="count1() " >
</form>
<p>
<form name="display2">
  <input type="text" name="box2" value="0" size=4 >
  <input type=button value="停止計時" onClick="clearTimeout(meter2) " >
  <input type=button value="繼續計時" onClick="count2() " >
</form>

<script>
  count1()
  count2()
</script>
</body>
</html>

尾聲
通過上面的講解,不知道您對setTimeout了解了沒有,下次使用setTimeout會不會很熟練?會不會再把setTimeout和setInterval搞混了?要是您有什麼不了解的地方,可以相互交流,共同提高,謝謝!


setTimeout (表達式,延時時間)
setTimeout(表達式,交互時間)
延時時間/交互時間是以豪秒為單位的(1000ms=1s) setTimeout 在執行時,是在載入後延遲指定時間後,去執行一次表達式,僅執行一次
setTimeout 在執行時,它從載入後,每隔指定的時間就執行一次表達式

1,基本用法:
執行一段代碼:
復制代碼 代碼如下:
var i=0;
setTimeout("i+=1;alert(i)",1000);

執行一個函數:
復制代碼 代碼如下:
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);

//注意比較上面的兩種方法的不同。

下面再來一個執行函數的:
復制代碼 代碼如下:
var i=0;
function test(){
i+=1;
alert(i);
}
setTimeout("test()",1000);

也可以這樣:
復制代碼 代碼如下:
setTimeout(test,1000);

總結:
setTimeout的原型是這樣的:
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

setTimeout有兩種形式

setTimeout(code,interval)
setTimeout(func,interval,args)

其中code是一個字符串
func是一個函數.

注意"函數"的意義,是一個表達式,而不是一個語句.
比如你想周期性執行一個函數
function a(){
//...
}
可寫為
setTimeout("a()",1000)

setTimeout(a,1000)

這裡注意第二種形式中,是a,不要寫成a(),切記!!!
展開來說,不管你這裡寫的是什麼,如果是一個變量,一定是一個指向某函數的變量;如果是個函數,那它的返回值就 要是個函數

2,用setTimeout實現setInterval的功能
思路很簡單,就是在一個函數中調用不停執行自己,有點像遞歸
復制代碼 代碼如下:
var i=0;
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout("xilou()",1000);
//用這個也可以
//setTimeout(xilou,1000);
}

3,在類中使用setTimeout
終於到正題了,其實在類中使用大家遇到的問題都是關於this的,只要解決了這個this的問題就萬事無憂了。
呵呵。讓我們來分析一下:
復制代碼 代碼如下:
function xilou(){

this.name="xilou";
this.sex="男";
this.num=0;
}
xilou.prototype.count=function(){
this.num+=1;
alert(this.num);
if(this.num>10){return;}
//下面用四種方法測試,一個一個輪流測試。
setTimeout("this.count()",1000);//A:當下面的x.count()調用時會發生錯誤:對象不支持此屬性或方法。
setTimeout("count()",1000);//B:錯誤顯示:缺少對象
setTimeout(count,1000);//C:錯誤顯示:'count'未定義
//下面是第四種
var self=this;
setTimeout(function(){self.count();},1000);//D:正確

}

var x=new xilou();
x.count();

錯誤分析:
A:中的this其實指是window對象,並不是指當前實例對象
B:和C:中的count()和count其實指的是單獨的一個名為count()的函數,但也可以是window.count(),因為window.count()可以省略為count()
D:將變量self指向當前實例對象,這樣js解析引擎就不會混肴this指的是誰了。

話說回來,雖然我們知道setTimeout("this.count()",1000)中的this指的是window對象,但還是不明白為什麼會是
window對象^_^(有點頭暈...)
那我們可以想象一下這個setTimeout是怎樣被定義的:
setTimeout是window的一個方法,全稱是這樣的:window.setTimeout()
那應該是這樣被定義的:
復制代碼 代碼如下:
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....代碼
return timer//返回一個標記符
}

所以當向setTimeout()傳入this的時候,當然指的是它所屬的當前對象window了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved