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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章