定时器 消除定时器

定时器：

定时器有两种，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>