定时调用setInterval和延时调用setTimeout的区别！

最新推荐文章于 2023-07-29 14:01:16 发布

chenronglong20

最新推荐文章于 2023-07-29 14:01:16 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/chenronglong20/article/details/104173675

本文深入讲解JavaScript中的定时器，包括setInterval和setTimeout的使用方法，通过实例代码展示如何实现重复调用和延时调用的功能，并介绍如何清除定时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一:定时调用setInterval

定时调用setInterval可以一直调用，延时调用setTimeout只调用一次

效果图：点击按钮后开始计数，每隔一秒调用一次，一直调用，可以用clearInterval清除定时调用
在这里插入图片描述

setInterval用法示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var start=document.getElementById("start");
			var stop=document.getElementById("stop");
			var h1=document.getElementById("h1");
			var i=1;
			var timer;
			start.onclick=function(){
			//调用定时函数，每1s调用一次
				timer=setInterval(function(){
					h1.innerHTML=i++
				},1000)//1000毫秒=1秒
			};
			stop.onclick=function(){
			//点击停止按钮清除定时调用
				clearInterval(timer)
			}
		}
	</script>
</head>
<body>
	<button type="button" id="start">开始</button>
	<button type="button" id="stop">停止</button>
	<h1 id="h1">0</h1>
</body>
</html>

二:延时调用setTimeout

效果图：点击按钮，两秒后执行函数，弹出警告框！并且只调用一次可以用clearTimeout清除延时调用
在这里插入图片描述

setTimeout用法示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript">
		window.onload=function(){
			var input=document.getElementById("input");
			//绑定单击响应函数
			input.onclick=function(){
				//延时调用 两秒后执行
				setTimeout(function(){
					alert("加油~")
				},2000)
			}
		}
	</script> 
</head>
	<body>
		<button type="button" id="input">弹出警告框！</button>
	</body>
</html>