計時器setTimeout()

setTimeout()計時器，在載入後延遲指定時間後,去執行一次表達式,僅執行一次。

文法:

setTimeout(代碼,延遲時間);

參數說明：

1. 要調用的函數或要執行的代碼串。

2. 延時時間：在執行代碼前需等待的時間，以毫秒為機關（1s=1000ms)。

當我們打開網頁3秒後，在彈出一個提示框，代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert(\'Hello!\')", 3000 );
</script>
</head>
<body>
</body>
</html>

當按鈕start被點選時，setTimeout()調用函數，在5秒後彈出一個提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
  var t=setTimeout("alert(\'Hello!\')",5000);
 }
</script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要建立一個運作于無窮循環中的計數器，我們需要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點選後，輸入域便從0開始計數。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById(\'txt\').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

取消計時器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止計時器。

文法:

clearTimeout(id_of_setTimeout)

參數說明:

id_of_setTimeout：由 setTimeout() 傳回的 ID 值。該值辨別要取消的延遲執行代碼塊。

下面的例子和上節的無窮循環的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById(\'txt\').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>