定时器:
定时器有两种,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>
今天的文章定时器 消除定时器故障_定时器的设置方法分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/75696.html