定时器:
定时器有两种,setTimeout () 和 setInterval (),二者的区别在于时间到后执行回调函数的次数,setTimeout () 只能执行一次,而 setInterval () 每当间隔这个倒计时一次,就会执行一次回调函数内容
setTimeout ()
- 时间结束后执行回调函数
- 只执行一次
setInterval ()
- 时间结束后执行回调函数
- 每间隔一次倒计时就会执行一次
在开始说明定时器前我们先引入一个概念 ------ 回调函数,顾名思义,回调就是回头再调用,在定时器部分,我们在倒计时结束后执行的函数,就叫做回调函数,我们在注册事件时内部的函数也是回调函数
一:setTimeout ( 回调函数,延迟的毫秒数 )
其中可以写成这种直接写函数的形式
window.setTimeout(function(){alert('两秒到啦');},2000)
也可以写成这种写函数名的形式(不用加括号!!)
window.setTimeout(fn,2000)function fn(){alert('两秒到啦');}
效果均是延迟两秒后弹出,要注意延迟的时间要写成毫秒数!!
二:setInterval ( 回调函数,延迟的毫秒数 )
记住这个定时器的回调函数时间每过一次就会执行一次,两种函数写法与 setTimeout 相同
<script>window.setInterval(function(){alert('时间到啦');},4000)</script>
注意点:
- window 可以省略
- 可以采用直接写函数或写函数名
- 时间一定要写成毫秒数
- 页面中可能有很多定时器,最好设置标志符号,var time1= window.setTimeout(fn,2000)
消除定时器:
消除定时器有 clearTimeout () 和 clearInterval ()
clearTimeout ( 要删除的定时器 ):
<button>关闭</button><script>var btn=document.querySelector('button');var time1=window.setTimeout(function(){alert('倒计时到啦');},3000)btn.addEventListener('click',function(){window.clearTimeout(time1);})</script>
clearInterval (要删除的定时器):
此方法可以使反复在执行并且调用的计时器中断
<button>关闭</button><script>var btn=document.querySelector('button');var time1=window.setInterval(function(){console.log('倒计时到啦');},1000)btn.addEventListener('click',function(){window.clearInterval(time1);})</script>