JavaScript：计时器

最新推荐文章于 2024-07-15 16:14:38 发布

一颗小谷粒

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量616

点赞数 4

分类专栏： Web前端开发文章标签： javascript 前端开发语言 css html5 设计语言

本文链接：https://blog.csdn.net/2301_79263365/article/details/139471844

版权

Web前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

▐ 什么是计时器?

通过使用JavaScript，我们可以做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，也称之为计时事件.

▐ 常用方法：

○ setTimeout

• 用法：setTimeout ( "函数" , "时间" )

• 含义：表示延迟 "指定时间" 后调用 "指定函数" ，且只调用一次.

⚿代码演示及解读：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			function start(){
				//定时器调用函数
				setTimeout("test()",2000);//延迟2s后调用test函数,只调用了一次 
			}
			function test(){
				alert("javascript");
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()"/>
	</body>
</html>

○ clearTimeout

• 用法：clearTimeout ( "number" )

• 含义：关闭setTimeout定时器

这里的参数number是定时器开始时，setTimeout返回的一个整数编号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var t;   //计时器setTimeout开始时会返回的一个整数编号
			function start(){
				//定时器调用函数
				 t = setTimeout("test()",2000);//延迟2s后调用test函数,只调用了一次 
			}
			function test(){
				alert("javascript");
			}
			function stop(){
				//关闭定时器
				clearTimeout(t);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()"/>
		<input type="button" value="停止" onclick="stop()"/>
	</body>
</html>

○ setInterval

• 用法：setInterval ( "函数" , "时间" )

• 含义：表示每隔 "指定时间" 就调用一次 "指定函数" ，只要不关闭定时器就会一直调用.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var t;   //计时器setInterva开始时会返回的一个整数编号
			function start(){
				//定时器调用函数
				t=setInterval("test()",2000);//每隔2s就调用一次test()
			}
			function test(){
				alert("javascript");
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()"/>
	</body>
</html>

○ clearInterval

• 用法：clearTimeout ( "number" )

• 含义：关闭setInterval定时器

同理，这里的参数number是定时器开始时，setInterva返回的一个整数编号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var t;
			function start(){
				//定时器调用函数
				 t=setInterval("test()",2000);//每隔指定时间就调用一次
			}
			function test(){
				alert("javascript");
			}
			function stop(){
				//清除定时器
				clearInterval(t);
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()"/>
		<input type="button" value="关闭" onclick="stop()"/>
	</body>
</html>