首頁 > 文章 > web前端 > javascript裡的定時器有哪些

javascript裡的定時器有哪些

青灯夜游原創: 2021-11-26 18:04:224428瀏覽

javascript裡的定時器有兩種：1、單次定時器，使用setTimeout()方法定義，可以在規定時間（以毫秒計）過後執行一次程式碼區塊；2、循環計時器，使用setInterval()方法定義，依照指定的周期（以毫秒計）來重複執行某些程式碼。

javascript裡的定時器有哪些

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在 JavaScript 中，我們可以利用計時器來延遲執行某些程式碼，或以固定的時間間隔重複執行某些程式碼。例如，您可以使用定時器定時更新頁面中的廣告或顯示一個即時的時鐘等。

JavaScript 中提供了兩個計時器：setTimeout() 和setInterval()

##setInterval ()依照指定的週期（單位為毫秒）來重複執行某些程式碼，計時器不會自動停止，除非呼叫clearInterval() 函數來手動停止或著關閉瀏覽器視窗

方法	說明
setTimeout()	在指定的時間後（單位為毫秒），執行某些程式碼，程式碼只會執行一次

setTimeout()

JS setTimeout() 函數用來在指定時間後執行某些程式碼，程式碼只會執行一次。

使用方法：

setTimeout(code,millisec)

code 必要。要呼叫的函數後要執行的 JavaScript 程式碼字串。
millisec 必需。執行程式碼前需等待的毫秒數。

實例：

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<button id="button" onclick="click1()">获取验证码</button>
		<span id="span"></span>
		<script>
			var time = 10;
			var num;
			var button = document.getElementById("button");
			var span = document.getElementById("span");
 
			function click1() {
				//click是关键字,所有函数名改为click1
				if (time == 0) {
					button.disabled = false;
					time = 10;
					span.innerHTML = "";
					clearTimeout(num);
				} else {
					button.disabled=true;
					span.innerHTML = time + "秒后重新获得返回值";
					time--;
					num = setTimeout("click1()",1000);
				}
			}
		</script>
	</body>
</html>

setInterval()

JS setInterval() 函數可以定義一個能夠重複執行的計時器，每次執行需要等待指定的時間間隔。

使用方法：

setInterval(code,millisec[,"lang"])

code 必要。要呼叫的函數或要執行的程式碼字串。
millisec 必須。週期性執行或呼叫 code 之間的時間間隔，以毫秒計。

實例：

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<button id="button" onclick="set()">获取验证码</button>
		<span id="span"></span>
		<script>
			var time = 10;
			var num;
			var button = document.getElementById("button");
			var span = document.getElementById("span");
 
			function set() {
				num = setInterval("click()", 1000);
				button.disabled = true;
			}
 
			function click() {
				if (time == 0) {
					button.disabled = false;
					time = 10;
					span.innerHTML = "";
					clearInterval(num);
				} else {
					span.innerHTML = time + "秒后重新获得返回值"
					time--;
				}
			}
		</script>
	</body>
</html>

【推薦學習：

javascript高階教學】

以上是javascript裡的定時器有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript是解釋型還是編譯型下一篇：javascript是解釋型還是編譯型

看更多