JavaScript window.setTimeout() 的詳細(xì)用法
js的setTimeout方法用處比較多，通常用在頁(yè)面刷新了、延遲執(zhí)行了等等。但是很多javascript新手對(duì)setTimeout的用法還是不是很了解。雖然我學(xué)習(xí)和應(yīng)用javascript已經(jīng)兩年多了，但是對(duì)setTimeout方法，有時(shí)候也要查閱資料。今天對(duì)js的setTimeout方法做一個(gè)系統(tǒng)地總結(jié)。
setInterval與setTimeout的區(qū)別
說(shuō)道setTimeout，很容易就會(huì)想到setInterval，因?yàn)檫@兩個(gè)用法差不多，但是又有區(qū)別，今天一起總結(jié)了吧！
setTimeout
定義和用法: setTimeout()方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式?！ ?/p>
語(yǔ)法: setTimeout(code,millisec)
參數(shù)： code （必需）：要調(diào)用的函數(shù)后要執(zhí)行的 JavaScript 代碼串。millisec（必需）：在執(zhí)行代碼前需等待的毫秒數(shù)?！?提示： setTimeout() 只執(zhí)行 code 一次。如果要多次調(diào)用，請(qǐng)使用 setInterval() 或者讓 code 自身再次調(diào)用 setTimeout()。
setInterval
setInterval() 方法可按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。
setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)。
語(yǔ)法: setInterval(code,millisec[,"lang"])
參數(shù): code 必需。要調(diào)用的函數(shù)或要執(zhí)行的代碼串。millisec 必須。周期性執(zhí)行或調(diào)用 code 之間的時(shí)間間隔，以毫秒計(jì)。
返回值: 一個(gè)可以傳遞給 Window.clearInterval() 從而取消對(duì) code 的周期性執(zhí)行的值。
區(qū)別
通過(guò)上面可以看出，setTimeout和setinterval的最主要區(qū)別是：
setTimeout只運(yùn)行一次，也就是說(shuō)設(shè)定的時(shí)間到后就觸發(fā)運(yùn)行指定代碼，運(yùn)行完后即結(jié)束。如果運(yùn)行的代碼中再次運(yùn)行同樣的setTimeout命令，則可循環(huán)運(yùn)行。（即 要循環(huán)運(yùn)行，需函數(shù)自身再次調(diào)用 setTimeout()）
而 setinterval是循環(huán)運(yùn)行的，即每到設(shè)定時(shí)間間隔就觸發(fā)指定代碼。這是真正的定時(shí)器。
setinterval使用簡(jiǎn)單，而setTimeout則比較靈活，可以隨時(shí)退出循環(huán)，而且可以設(shè)置為按不固定的時(shí)間間隔來(lái)運(yùn)行，比如第一次1秒，第二次2秒，第三次3秒。
我個(gè)人而言，更喜歡用setTimeout多一些！
setTimeout的用法
讓我們一起來(lái)運(yùn)行一個(gè)案例，首先打開(kāi)記事本，將下面代碼貼入，運(yùn)行一下效果！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> <font color=blue> 腳本之家示范網(wǎng)頁(yè) </font> </h1>
<p> 請(qǐng)等三秒!</p>
<script>
setTimeout("alert('對(duì)不起, 腳本之家要你等候多時(shí)')", 3000 )
</script>
</body>
</html>
頁(yè)面會(huì)在停留三秒之后彈出對(duì)畫(huà)框！這個(gè)案例應(yīng)用了setTimeout最基本的語(yǔ)法，setTimeout不會(huì)自動(dòng)重復(fù)執(zhí)行！
setTimeout也可以執(zhí)行function，還可以不斷重復(fù)執(zhí)行！我們?cè)賮?lái)一起做一個(gè)案例：
<!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文本框中的數(shù)字在一秒一秒的遞增！所以，setTimeout也可以制作網(wǎng)頁(yè)中的時(shí)間跳動(dòng)！
沒(méi)有案例，學(xué)習(xí)起來(lái)不會(huì)很快，我們?cè)賮?lái)一起做一個(gè)例子，計(jì)算你在haorooms某個(gè)頁(yè)面的停留時(shí)間：
<!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博客中的停留時(shí)間是: </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>
怎么樣，通過(guò)上面的例子，對(duì)setTimeout（）的用法，相信你都了解了吧！
clearTimeout( )
我們?cè)賮?lái)一起看一下 clearTimeout( )，
clearTimout( ) 有以下語(yǔ)法 :
clearTimeout(timeoutID)
要使用 clearTimeout( ), 我們?cè)O(shè)定 setTimeout( ) 時(shí) , 要給予這 setTimout( ) 一個(gè)名稱(chēng) , 這名稱(chēng)就是 timeoutID , 我們叫停時(shí) , 就是用這 timeoutID 來(lái)叫停 , 這是一個(gè)自定義名稱(chēng) , 但很多人就以 timeoutID 為名。
在下面的例子 , 設(shè)定兩個(gè) timeoutID, 分別命名為 meter1 及 meter2, 如下 :
timeoutID ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)
使用這 meter1 及 meter2 這些 timeoutID 名稱(chēng) , 在設(shè)定 clearTimeout( ) 時(shí) , 就可指定對(duì)哪一個(gè) setTimeout( ) 有效 , 不會(huì)擾及另一個(gè) setTimeout( ) 的操作。
下面請(qǐng)看 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="停止計(jì)時(shí)" onClick="clearTimeout(meter1) " >
<input type=button value="繼續(xù)計(jì)時(shí)" onClick="count1() " >
</form>
<p>
<form name="display2">
<input type="text" name="box2" value="0" size=4 >
<input type=button value="停止計(jì)時(shí)" onClick="clearTimeout(meter2) " >
<input type=button value="繼續(xù)計(jì)時(shí)" onClick="count2() " >
</form>
<script>
count1()
count2()
</script>
</body>
</html>
尾聲
通過(guò)上面的講解，不知道您對(duì)setTimeout了解了沒(méi)有，下次使用setTimeout會(huì)不會(huì)很熟練？會(huì)不會(huì)再把setTimeout和setInterval搞混了？要是您有什么不了解的地方，可以相互交流，共同提高，謝謝！
setTimeout (表達(dá)式,延時(shí)時(shí)間)
setTimeout(表達(dá)式,交互時(shí)間)
延時(shí)時(shí)間/交互時(shí)間是以豪秒為單位的(1000ms=1s) setTimeout 在執(zhí)行時(shí),是在載入后延遲指定時(shí)間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次
setTimeout 在執(zhí)行時(shí),它從載入后,每隔指定的時(shí)間就執(zhí)行一次表達(dá)式
1，基本用法：
執(zhí)行一段代碼：
var i=0;
setTimeout("i+=1;alert(i)",1000);
執(zhí)行一個(gè)函數(shù)：
var i=0;
setTimeout(function(){i+=1;alert(i);},1000);
//注意比較上面的兩種方法的不同。
下面再來(lái)一個(gè)執(zhí)行函數(shù)的：
var i=0;
function test(){
i+=1;
alert(i);
}
setTimeout("test()",1000);
也可以這樣：
setTimeout(test,1000);
總結(jié)：
setTimeout的原型是這樣的：
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])
setTimeout有兩種形式
setTimeout(code,interval)
setTimeout(func,interval,args)
其中code是一個(gè)字符串
func是一個(gè)函數(shù).
注意"函數(shù)"的意義,是一個(gè)表達(dá)式,而不是一個(gè)語(yǔ)句.
比如你想周期性執(zhí)行一個(gè)函數(shù)
function a(){
//...
}
可寫(xiě)為
setTimeout("a()",1000)
或
setTimeout(a,1000)
這里注意第二種形式中,是a,不要寫(xiě)成a(),切記!!!
展開(kāi)來(lái)說(shuō),不管你這里寫(xiě)的是什么,如果是一個(gè)變量,一定是一個(gè)指向某函數(shù)的變量;如果是個(gè)函數(shù),那它的返回值就 要是個(gè)函數(shù)
2,用setTimeout實(shí)現(xiàn)setInterval的功能
思路很簡(jiǎn)單，就是在一個(gè)函數(shù)中調(diào)用不停執(zhí)行自己，有點(diǎn)像遞歸
var i=0;
function xilou(){
i+=1;
if(i>10){alert(i);return;}
setTimeout("xilou()",1000);
//用這個(gè)也可以
//setTimeout(xilou,1000);
}
3,在類(lèi)中使用setTimeout
終于到正題了，其實(shí)在類(lèi)中使用大家遇到的問(wèn)題都是關(guān)于this的，只要解決了這個(gè)this的問(wèn)題就萬(wàn)事無(wú)憂了。
呵呵。讓我們來(lái)分析一下：
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;}
//下面用四種方法測(cè)試,一個(gè)一個(gè)輪流測(cè)試。
setTimeout("this.count()",1000);//A:當(dāng)下面的x.count()調(diào)用時(shí)會(huì)發(fā)生錯(cuò)誤：對(duì)象不支持此屬性或方法。
setTimeout("count()",1000);//B:錯(cuò)誤顯示：缺少對(duì)象
setTimeout(count,1000);//C:錯(cuò)誤顯示：'count'未定義
//下面是第四種
var self=this;
setTimeout(function(){self.count();},1000);//D:正確
}
var x=new xilou();
x.count();
錯(cuò)誤分析：
A：中的this其實(shí)指是window對(duì)象，并不是指當(dāng)前實(shí)例對(duì)象
B：和C：中的count()和count其實(shí)指的是單獨(dú)的一個(gè)名為count()的函數(shù),但也可以是window.count(),因?yàn)閣indow.count()可以省略為count()
D：將變量self指向當(dāng)前實(shí)例對(duì)象，這樣js解析引擎就不會(huì)混肴this指的是誰(shuí)了。
話說(shuō)回來(lái)，雖然我們知道setTimeout("this.count()",1000)中的this指的是window對(duì)象，但還是不明白為什么會(huì)是
window對(duì)象^_^(有點(diǎn)頭暈...)
那我們可以想象一下這個(gè)setTimeout是怎樣被定義的：
setTimeout是window的一個(gè)方法，全稱(chēng)是這樣的：window.setTimeout()
那應(yīng)該是這樣被定義的：
window.setTimeout=function(vCode, iMilliSeconds [, sLanguage]){
//.....代碼
return timer//返回一個(gè)標(biāo)記符
}
所以當(dāng)向setTimeout()傳入this的時(shí)候，當(dāng)然指的是它所屬的當(dāng)前對(duì)象window了。
- javascript window.confirm確認(rèn) 取消對(duì)話框?qū)崿F(xiàn)代碼小結(jié)
- 解決javascript:window.close()在chrome,Firefox下失效的問(wèn)題
- javascript中的window.location.search方法簡(jiǎn)介
- js實(shí)現(xiàn)window.open不被攔截的解決方法匯總
- javascript 中設(shè)置window.location.href跳轉(zhuǎn)無(wú)效問(wèn)題解決辦法
- JavaScrip中window.dispatchEvent的原理和使用具體實(shí)例
相關(guān)文章
javascript創(chuàng)建對(duì)象的幾種模式介紹
下面小編就為大家?guī)?lái)一篇javascript創(chuàng)建對(duì)象的幾種模式介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
本篇文章主要介紹了在HTML文檔里嵌入客戶(hù)端JavaScript代碼有4中方法，感興趣的小伙伴們可以參考一下，具體如下：2018-05-05
本篇文章小編將為大家介紹，用js實(shí)現(xiàn)trim()的解決辦法，有需要的朋友可以參考一下2013-04-04
關(guān)于javascript事件響應(yīng)的基礎(chǔ)語(yǔ)法總結(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇關(guān)于javascript事件響應(yīng)的基礎(chǔ)語(yǔ)法總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-12-12
三張圖帶你搞懂JavaScript的原型對(duì)象與原型鏈
這篇文章介紹了JavaScript的原型對(duì)象與原型鏈，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
addEventListener()第三個(gè)參數(shù)useCapture (Boolean)詳細(xì)解析
true的觸發(fā)順序總是在false之前；如果多個(gè)均為true，則外層的觸發(fā)先于內(nèi)層；如果多個(gè)均為false，則內(nèi)層的觸發(fā)先于外層2013-11-11
javascript引用對(duì)象的方法...2007-01-01
本篇文章，小編為大家介紹，在JavaScript中typeof的用途介紹。不過(guò)在閱讀本文的前提是，你現(xiàn)在應(yīng)該已經(jīng)知道原始值和對(duì)象值的區(qū)別了2013-04-04
這篇文章介紹了JavaScript splice()方法，有需要的朋友可以參考一下2013-11-11
如何使用js實(shí)現(xiàn)遍歷html元素比如:tr td等，本文將提供實(shí)現(xiàn)代碼，需要了解的朋友可以參考下2012-12-12