實(shí)現(xiàn)javascript的延期執(zhí)行或者重復(fù)執(zhí)行的兩個(gè)函數(shù)

2019-11-21 02:03:20

字體：大中小

供稿：網(wǎng)友

以下內(nèi)容摘錄自《征服AJAX Web2.0開(kāi)發(fā)技術(shù)詳解》,今天在圖書(shū)管看書(shū)覺(jué)得講的挺好的，特此摘錄！小部分內(nèi)容和代碼做了改動(dòng)！

window對(duì)象提供了兩個(gè)方法來(lái)實(shí)現(xiàn)定時(shí)器的效果，分別是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時(shí)間后運(yùn)行；而后者則可以使一段代碼每過(guò)指定時(shí)間就運(yùn)行一次。它們的原型如下：

復(fù)制代碼代碼如下:

window.setTimeout(expression,milliseconds);   
window.setInterval(expression,milliseconds);  

其中，expression可以是用引號(hào)括起來(lái)的一段代碼，也可以是一個(gè)函數(shù)名，到了指定的時(shí)間，系統(tǒng)便會(huì)自動(dòng)調(diào)用該函數(shù)，當(dāng)使用函數(shù)名作為調(diào)用句柄時(shí)，不能帶有任何參數(shù)；而使用字符串時(shí)，則可以在其中寫(xiě)入要傳遞的參數(shù)。兩個(gè)方法的第二個(gè)參數(shù)是milliseconds，表示延時(shí)或者重復(fù)執(zhí)行的毫秒數(shù)。下面分別介紹兩種方法。
1．window.setTimeout方法該方法可以延時(shí)執(zhí)行一個(gè)函數(shù)，例如：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

這段代碼將使得頁(yè)面打開(kāi)5秒鐘后顯示對(duì)話框“hello”。其中最后一句也可以寫(xiě)為：
window.setTimeout("hello()",1000);
讀者可以體會(huì)它們的差別，在window.setInterval方法中也有這樣的性質(zhì)。
如果在延時(shí)期限到達(dá)之前取消延執(zhí)行，可以使用window.clearTimeout(timeoutId)方法，該方法接收一個(gè)id，表示一個(gè)定時(shí)器。這個(gè)id是由setTimeout方法返回的，例如：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

這樣，如果要取消顯示，只需單擊頁(yè)面任何一部分，就執(zhí)行了window.clearTimeout方法，使得超時(shí)操作被取消。

2．window.setInterval方法
該方法使得一個(gè)函數(shù)每隔固定時(shí)間被調(diào)用一次，是一個(gè)很常用的方法。如果想要取消定時(shí)執(zhí)行，和clearTimeout方法類(lèi)似，可以調(diào)用window.clearInterval方法。clearInterval方法同樣接收一個(gè)setInterval方法返回的值作為參數(shù)。例如：

復(fù)制代碼代碼如下:

//定義一個(gè)反復(fù)執(zhí)行的調(diào)用   
var id=window.setInterval("somefunction",10000);   
//取消定時(shí)執(zhí)行   
window.clearInterval(id);  

上面的代碼僅用于說(shuō)明怎樣取消一個(gè)定時(shí)執(zhí)行。實(shí)際上在很多場(chǎng)合都需要用到setInterval方法，下面將設(shè)計(jì)一個(gè)秒表，來(lái)介紹setInterval函數(shù)的用途：該秒表將包括兩個(gè)按鈕和一個(gè)用于顯示時(shí)間的文本框。當(dāng)單擊開(kāi)始按鈕時(shí)開(kāi)始計(jì)時(shí)，最小單位為0.01秒，此時(shí)再次單擊按鈕則停止計(jì)時(shí)，文本框顯示經(jīng)過(guò)的時(shí)間。另外一個(gè)按鈕用于將當(dāng)前時(shí)間清零。其實(shí)現(xiàn)代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0" name="txt1"/> <input type="button" value="開(kāi)始" name="btnStart"/> <input type="button" value="重置" name="btnReset"/> </form> </body> </html> <script language="JavaScript" type="text/javascript">  </script>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)第1/4頁(yè)

下一篇：javascript Zifa FormValid 0.1表單驗(yàn)證代碼打包下載