JavaScript的定时器

最新推荐文章于 2024-08-20 19:21:56 发布

是黄小越丫

最新推荐文章于 2024-08-20 19:21:56 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/m0_52833844/article/details/124062458

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的两种定时器——间隔定时器（setInterval）和延时定时器（setTimeout）。它们分别用于周期性和一次性执行指定代码。通过实例展示了如何设置和关闭定时器，并解释了定时器返回值的用途，以及如何使用clearInterval和clearTimeout来停止定时任务。文章还提及了关闭定时器的实践应用，例如在按钮点击事件中关闭定时器。

摘要由CSDN通过智能技术生成

JavaScript的定时器有两类：间隔定时器和延时定时器。（自）

间隔定时器：按照指定周期（毫秒）去执行指定的代码
延时定时器：在固定的时间（毫秒）后执行一次指定代码

一千毫秒为一秒：1000ms=1s

间隔定时器

语法：setInterval(函数,时间)
函数：每次要执行的内容
时间：单位是毫秒

<script>
setInterval(function(){
	//要执行的代码
	console.log('间隔定时器，每秒打印一次这句话，可以打印无数次')
},1000);
</script>

延时定时器

语法：setTimeout(函数,时间)
函数：时间到达后要执行的代码
时间：单位是毫秒

<script>
setTimeout(function(){
	//要执行的代码
	console.log('延时定时器，一秒后打印这句话，且只打印一次')
},1000);
</script>

间隔定时器和延时定时器都有返回值，返回值是当前页面的第几个定时器，不区分定时器的种类。（获取返回值，方便关闭定时器）

var timer1=setInterval(function(){},1000);
var timer2=setTimeout(function(){},1000);
//运行后 timer1=1、timer2=2

关闭定时器

语法一：clearInterval(要关闭的定时器返回值)
语法二：clearTimeout(要关闭的定时器返回值)
两种语法都可以关闭间隔定时器和延时定时器，即不区分定时器种类。（要关闭定时器时，记得那个就用那个）

<button id='close'>关闭定时器按钮</button>
//特别说明上面的这句代码放在html中，在这里添加按钮是为了方便观看效果
//下面的代码都是在<script></script>或者.js文件中
var timer1=setInterval(function(){console.log('间隔定时器，一秒执行一次')},1000);
var timer2=setTimeout(function(){console.log('延时定时器，五秒后执行一次')},5000);

//给按钮添加点击事件
close.onclick=function(){
//关闭定时器
clearInterval(timer1);
clearInterval(timer2);
//或者用下面这两句代码关闭也是一样的，
//clearTimeout(timer1);
//clearTimeout(timer2);
}