JS 定时器及消除定时器

定时器：

定时器有两种，setTimeout () 和 setInterval ()，二者的区别在于时间到后执行回调函数的次数，setTimeout () 只能执行一次，而 setInterval () 每当间隔这个倒计时一次，就会执行一次回调函数内容

setTimeout ()

时间结束后执行回调函数

只执行一次

setInterval ()

时间结束后执行回调函数

每间隔一次倒计时就会执行一次

在开始说明定时器前我们先引入一个概念 ------ 回调函数，顾名思义，回调就是回头再调用，在定时器部分，我们在倒计时结束后执行的函数，就叫做回调函数，我们在注册事件时内部的函数也是回调函数

一：setTimeout ( 回调函数，延迟的毫秒数 )

其中可以写成这种直接写函数的形式

window.setTimeout(function(){

         alert('两秒到啦');

     },2000)

也可以写成这种写函数名的形式（不用加括号！！）

window.setTimeout(fn,2000)
functionfn(){
alert('两秒到啦');
    }

效果均是延迟两秒后弹出，要注意延迟的时间要写成毫秒数！！

二：setInterval ( 回调函数，延迟的毫秒数 )

记住这个定时器的回调函数时间每过一次就会执行一次，两种函数写法与 setTimeout 相同

<script>window.setInterval(function(){
alert('时间到啦');
        },4000)
</script>

注意点：

• window 可以省略
• 可以采用直接写函数或写函数名
• 时间一定要写成毫秒数，页面中可能有很多定时器，最好设置标志符号，var time1= window.setTimeout(fn,2000)

消除定时器：

消除定时器有 clearTimeout () 和 clearInterval ()

clearTimeout ( 要删除的定时器 ):
<button>关闭</button><script>varbtn=document.querySelector('button');
vartime1=window.setTimeout(function(){
alert('倒计时到啦');
        },3000)
btn.addEventListener('click',function(){
window.clearTimeout(time1);
        })
</script>

clearInterval (要删除的定时器):

此方法可以使反复在执行并且调用的计时器中断

<button>关闭</button><script>varbtn=document.querySelector('button');
vartime1=window.setInterval(function(){
console.log('倒计时到啦');
        },1000)
btn.addEventListener('click',function(){
window.clearInterval(time1);
        })
</script>