利用setTimeout(setInterval)做簡易倒數計時器
- 詳細內容
- 分類:Javascript
- 發佈:2012-12-05, 週三 21:34
- 點擊數:9692
setTimeout 與 setInterval 的功能:
setTimeout與setInterval都是用來計算一段時間後,執行某個函式,或程式碼。
不同在於setTimeout只執行一次而setInterval卻是連續執行。
setTimeout 與 setInterval 的語法:
兩個語法其實很相似
setTimeout:
var timeoutid = window.setTimeout(function, delaytime, [param1, param2, ...]); var timeoutid = window.setTimeout("javascript code", delaytime); //這個語法是不建議使用的,原因跟eval()一樣,危險... //似乎會在內部調用eval()函式..
setInterval:
var intervalid = window.setInterval(function, delay[, param1, param2, ...]); var intervalid = window.setInterval("javascript code", delay); //同樣不建議使用
function=>回呼函式,delaytime到時瀏覽器會呼叫此函式。
delaytime=>延遲時間 每1000為一秒鐘。
param1,param2,...=>傳遞給function的參數
使用setTimeout 與 setInterval 要注意的是:
1. IE並不支援第一種語法的參數傳遞。parame1, param2 都是無效的。
2.delay time並不準確,實際是會延遲的,因為javascript其實是個單執行緒的程式語言,這導致timer時間到了,
但程式本身如果還在執行其他程式碼的話,就會造成時間上的延遲。
如果IE不支援參數傳遞,那該如何傳遞參數給回呼函式? 下面是比較簡易了兩個方法:
<script type="text/javascript"> function show5(a){ // show5()是一個帶有參數的函示 alert(a); } window.setTimeout(function(){show5(5);},5000); window.setTimeout("show5(5);",5000); </script>
第一種方法是使用不帶有參數的函數實字當作第一個參數,然後在函式中呼叫帶有參數的函式(show5(a))。
第二種作法其實就是上面提到的第二種語法,直接把字串當作第一個參數來傳送。
這兩種做法都可以在5秒後show出 5 不過第二種方法不被建議使用,第一種方法也有效率的問題 當然有其他做法,不過有點複雜下次再提。
我每次都告訴自己 能用就好 >"<....這真是懶惰的好藉口..
clearTimeout 與 clearInterval:
window.clearTimeout(timeoutid) 用來clean setTimeout,輸入參數為setTimeout的傳回值
window.clearInterval(intervalid) 用來clean setInterval,輸入參數為setInterval的傳回值
傳遞一個無效的ID給clearTimeout並部會有任何影響,連例外(exception)都不會丟出來。
我找不到有文件說明這timer會自動回收掉@@".... 所以請記得自己clear掉....
===================================================================
現在來寫個倒數計時的簡易計時器吧:
setInterval()版:
<html> <head> <script type="text/javascript"> var countdownnumber=5; var countdownid,x; function initial(){ x=document.getElementById("countdown"); x.innerHTML=countdownnumber; countdownnumber--; countdownid=window.setInterval(countdownfunc,1000); } function countdownfunc(){ x.innerHTML=countdownnumber; if (countdownnumber==0){ alert("倒數結束"); clearInterval(countdownid); } countdownnumber--; } </script> </head> <body onload="initial();"> <p>倒數時間:</p> <div id="countdown"> </div> </body> </html>
setTimeout()版:
<html> <head> <script type="text/javascript"> var countdownnumber=5; var countdownid; function initial(){ countdownfunc(); } function countdownfunc(){ var x=document.getElementById("countdown"); x.innerHTML=countdownnumber; if (countdownnumber==0){ alert("倒數結束"); clearTimeout(countdownid); }else{ countdownnumber--; if(countdownid){ clearTimeout(countdownid); } countdownid=setTimeout(countdownfunc,1000); } } </script> </head> <body onload="initial();"> <p>倒數時間:</p> <div id="countdown"></div> </body> </html>
在程式碼不複雜的情況下 兩個執行都沒時麼大問題。但是如過太多太複雜就很難說了,問題還是在於程式的延遲..
就像前面說的 javascript是單執行緒的,導致setInterval跟setTimeout的時間並不準確,有可能會被延遲執行。
setInterval跟setTimeout被延遲的症狀也會不一樣...
假設setInterval每秒呼叫一次,總共呼叫三次。那如果程式被延遲了三秒,最後的結果就是setInterval會在三秒後連續執行三次。
假設setTimeout每秒呼叫一次,總共呼叫三次。那如果程式被延遲了三秒,最後的結果就是setTimeout會在三秒後第一次執行。
自己的備忘錄:
1.setInterval跟setTimeout是會被延遲的,並沒有時間上的準確性。
2.setInterval跟setTimeout不會自動clean id,至少我還沒找到明確的文件。
3.setInterval跟setTimeout不是ECMAScript標準 他是瀏覽器物件BOM window 的方法,有時候也被稱為0級DOM。
4.setInterval跟setTimeout第一個參數使用字串時,內部可能調用了eval()函式。
5.在setInterval跟setTimeout呼叫的函式在使用this時,this 是全域的,他指向window。
按個讚!~支持本站!~
你可能會有興趣的文章
- javascript 變數與常數
- javascript 初體驗..
- javascript 簡易手工萬年曆
- javascript沒有sleep跟delay
- javascript 邏輯運算子 || (OR) 跟 &&(AND) 的傳回值不只是true
- javascript onload 都不onload了- 淺談onload的弔詭