首頁 > web前端 > 前端問答 > javascript裡的定時器有哪些

javascript裡的定時器有哪些

青灯夜游
發布: 2021-11-26 18:04:27
原創
4434 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板