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,说明没进入到定时执行的方法内,间接说明这个定时方法取消成功。