两种定时器
-
延时定时器:setTimeout,只会在时间结束之后执行1次
// 参数1:回调函数 参数2: 时间(毫秒) var timer = setTimeout(function(){},1000) // 清除定时器 clearTimeout(timer);
-
间歇定时器/循环定时器:setInterval,每次时间间隔执行1次
// 参数1:回调函数 参数2: 时间(毫秒) var timer = setInterval(function(){},1000) // 清除定时器 clearInterval(timer);
-
清除定时器clearTimeout和clearInterval
- 清除定时器的方法可以通用
- 在重新设置定时器之前,一定要先清除定时器,不然定时器会累加
- 如果要清除定时器,一定要给设置的定时器接收一个返回值
- 定时器也不一定准确,如果有大量耗时的同步代码,会阻塞定时器代码执行
- 如果需要定时器的内容先执行一次,可以把函数提取出来先调用一次
前端定时器案例-倒计时跳转页面
<h1>
404,访问失败,页面将在<span id = 'txt'>5</span>秒后跳转至首页
</h1>
<script>
var txt = document.getElementById('txt');
var num = 5;
var timer = setInterval(function(){
num--;
txt.textContent = num;
if(num<=0){
clearInterval(timer)
// 类似于a标签点击跳转的效果
location.href = 'http://www.baidu.com'
}
},1000)
</script>