利用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。

 
 

  按個讚!~支持本站!~

FB推薦載入中  

 你可能會有興趣的文章

返回本頁開頭    返回部落格首頁