JS中的定时器函数

最新推荐文章于 2022-10-26 23:19:26 发布

我愿成为你头顶的云

最新推荐文章于 2022-10-26 23:19:26 发布

阅读量3.7k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42640067/article/details/118278098

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JS中的定时器函数

1、setTimeout()方法
2、clearTimeout()方法
3、setInterval()方法
4、clearInterval()方法

有时候希望代码不是马上执行，而是在一个特定的时间间隔后执行，或者是每隔一段时间后执行，这在java中可以用定时任务来实现，同样的在前端的JS中，也可以通过Window对象提供的方法来实现。

1、setTimeout()方法

实际上，这是Window对象提供的方法，这里只说最常见的用法。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>定时器测试</title>
</head>
<body>
	<h2>测试JS定时器函数。</h2>
<script>
	window.setTimeout(function(){
		alert('第5秒过后弹出！');
	},5000);

	setTimeout(function(){
		alert('第10秒过后弹出！')
	},10000);

</script>
</body>
</html>

打开该html页面，效果：
在这里插入图片描述
5秒过后的效果：

10秒过后的效果：

可以看到JS中的代码起了作用，这就相当于一个简单的定时器执行。setTimeout()方法是Window对象提供的，最常见的用法格式是：

setTimeout(function(){
     // 这里用伪代码
     要定时执行的代码;
},时间的毫秒数);

两个参数，第一个参数是匿名函数，要执行的代码放在这个函数里，第二个参数是时间间隔，单位是ms，1000ms = 1s。

这个方法实际上是有返回值的，修改JS中的代码测试：
在这里插入图片描述
用一个变量来接收此方法执行后的返回值，刷新页面：

先弹出1，然后弹出2，说明res接收到了两个值，第1个返回了值1，第2个方法返回了值2，这个返回值会在取消定时执行时用到。

2、clearTimeout()方法

此方法可以取消由setTimeout()方法设置的定时任务操作，需要一个id参数，刚好这个id参数是执行setTimeout()方法后返回的，修改JS代码：
在这里插入图片描述
然后再刷新页面：

弹窗不再出现，说明取消成功了，需要注意的是，取消动作必须在定时执行动作之前来进行，要不然就没意义了。用法为：clearTimeout(id)。id参数是setTimeout()方法返回的，可以理解为1个标识。

3、setInterval()方法

这个方法类似setTimeout()方法，区别是setTimeout()方法只会在指定时间间隔之后执行一次，而setInterval()方法会在指定时间间隔之后反复周期性的执行。代码如下：

<script>
	var res;
    var count = 0;
	res = setInterval(function(){
		alert(count);
		count++;
	},3000);
</script>

刷新页面，效果如下：
在这里插入图片描述

可以看到每过3秒钟，count完成一次自增，并且弹窗。用法基本类似，如下：

setInterval(function(){
     要定时执行的代码;
},时间的毫秒数);

同样的这个方法也会返回一个id值，用来取消时会用到。

4、clearInterval()方法

代码：
在这里插入图片描述
刷新页面：

可以看到count的值还是0，说明没进入到定时执行的方法内，间接说明这个定时方法取消成功。

我愿成为你头顶的云

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
JS中的定时器函数

JS中的定时器函数1、setTimeout()方法2、clearTimeout()方法3、setInterval()方法4、clearInterval()方法有时候希望代码不是马上执行，而是在一个特定的时间间隔后执行，或者是每隔一段时间后执行，这在java中可以用定时任务来实现，同样的在前端的JS中，也可以通过Window对象提供的方法来实现。1、setTimeout()方法实际上，这是Window对象提供的方法，这里只说最常见的用法。代码如下：<!DOCTYPE html><h
复制链接

扫一扫