1. 程式人生 > >js 定時器、延時和週期

js 定時器、延時和週期

js 定時器有以下兩個方法:

  • setInterval() :按照指定的週期(以毫秒計)來呼叫函式或計算表示式。方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉。
  • setTimeout() :在指定的毫秒數後呼叫函式或計算表示式。

setInterval()

語法

setInterval(code,millisec,lang)
引數 描述
code 必需。要呼叫的函式或要執行的程式碼串。
millisec 必須。週期性執行或呼叫 code 之間的時間間隔,以毫秒計。
lang 可選。 JScript | VBScript | JavaScript

以下例項在每 1000 毫秒執行 clock() 函式。例項中也包含了停止執行的按鈕:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<body>
<input type="text" id="clock" />
<script type="text/javascript">
	var int=self.setInterval("clock()",1000);
	function clock()
	{
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("clock").value=t;
	}
</script>
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>

setInterval() 方法會不停地呼叫函式,直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

setTimeout()

語法

setTimeout(code,millisec,lang)
引數 描述
code 必需。要呼叫的函式後要執行的 JavaScript 程式碼串。
millisec 必需。在執行程式碼前需等待的毫秒數。
lang 可選。指令碼語言可以是:JScript | VBScript | JavaScript

例項演示如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>點選按鈕,在等待 3 秒後彈出 "Hello"。</p>
<button onclick="myFunction()">點我</button>
<script>
	function myFunction()
	{
		setTimeout(function(){alert("Hello")},3000);
	}
</script>
</body>
</html>