HTML中详述setInterval（）方法与setTimeout（）方法区别

最新推荐文章于 2023-05-26 13:34:54 发布

zzu957

最新推荐文章于 2023-05-26 13:34:54 发布

阅读量502

点赞数

分类专栏： HTML学习文章标签： javascript js

本文链接：https://blog.csdn.net/zzu957/article/details/107409706

版权

HTML学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

setInterval（）

用法：setInterval（“方法名”，时间）;
作用：每隔一段时间执行一次方法。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function a(){
				console.log(957);
			}
			
			function b(){
				clearInterval(id);
			}
			var id = setInterval("a()",1000);
			function c(){
				setInterval("a()",1000);
			}
		</script>
		<input type="button" value="开始" onclick="c()" />
		<input type="button" value="结束" onclick="b()" />
		
	</body>
</html>

结果展示：
在这里插入图片描述
点击结束按钮，停止执行方法，次数确定为4次；点击开始按钮，从4开始继续每秒执行一次方法。

setTimeout（）

用法：setTimeout（“方法名”，时间）;
作用：在一段时间后，执行一次方法结束，即只执行一次方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			function c(){
				console.log(111);
			}
			
			var id = setTimeout("c()",5000);
			
			function a(){
				clearTimeout(id);
			}
		</script>
		
		<input type="button" value="结束" onclick="a()" />
	</body>
</html>

结果显示：
在这里插入图片描述
5s后：

区别

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭；
setTimeout() 只执行 code 一次；
如果要多次调用，需要使用 setInterval() 或者让 code 自身再次调用 setTimeout()；

zzu957

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中详述setInterval（）方法与setTimeout（）方法区别

setInterval（）用法：setInterval（“方法名”，时间）;作用：每隔一段时间执行一次方法。代码示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function a(){ console.log(957)
复制链接

扫一扫