JavaScript 計時事件

setInterval() 方法

setInterval() 間隔指定的毫秒數不停地執行指定的代碼
setInterval() 第一個參數是函數(function)。第二個參數間隔的毫秒數
1000 毫秒是一秒。

setTimeout() 方法

與setInterval() 方法用法相同

示例

每三秒彈出 "hello"

setInterval(function(){
	alert("Hello")
},3000);

等待3秒,然後彈出 “Hello”:

setTimeout(function(){
	alert("Hello")
},3000);

如何停止執行?

clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼。
clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼。

區別

setTimeout() 方法只會在規定時間內行一次,而setInterval() 方法會無限執行。

示例

點擊開始按鈕div變色(無限循環),點擊停止,停止變色

效果圖
在這裏插入圖片描述
實現代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.oDiv {
				width: 100px;
				height: 100px;
				background-color: aqua;
			}

			.lDiv {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="oDiv"></div>
		<input id="btn1" type="button" value="開始" />
		<input id="btn2" type="button" value="停止" />
	</body>
	<script src="jquery-3.4.1.js"></script>
	<script>
		$("#btn1").click(function() {
			a = setInterval(function() {
				$(".oDiv").toggleClass("lDiv");
			}, 100)
		})
		$("#btn2").click(function() {
			clearInterval(a);
		})
	</script>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章