Javascript 定时器

1.基本用法

• Javascript定时器分为循环定时器和延时定时器
• 循环定时器：setInterval(cb,duration)，循环执行回调，时间单位为毫秒
• 延时定时器: setTimeout(cb,duration)，只执行一次回调，时间单位为毫秒

<script>
    //循环定时器 每秒输出当前的秒数
    setInterval(() => {
        console.log('当前秒数='+new Date().getSeconds())
    }, 1000)

    //延时定时器 3秒后输出
    setTimeout(() => {
        console.log('此字段由延时定时器打印')
    }, 3000);

</script>

2.清除定时器

• 定时器每次创建时会返回一个id（自增的整数），保存该id可以清除此定时器
• clearInterval(id)和clearTimeout(id)分别用来清除循环定时器和延时定时器
• 注意：定时器每次创建都会是一个新的定时器，可无限创建，如果定时器是动态开启的，最好开启前先清理一遍

<script>
    //用来记录定时器的id
    var timer = null
    //事件绑定
    document.querySelector('#begin').onclick = function(){
        //开启前先清理一遍
        clearInterval(timer)
        //开启定时器
        timer = setInterval(() => {
            console.log('当前秒数='+new Date().getSeconds())
        }, 1000)
        console.log('此循环定时器id='+timer)
    }
    document.querySelector('#over').onclick = function(){
        //利用之前保存的timer清除循环定时器
        clearInterval(timer)
        console.log('清除此循环定时器')
    }
</script>

3.Vue组件中的定时器

• 组件被销毁不影响定时器运行

//Timer组件
<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  mounted(){
    setInterval(() => {
      console.log('当前秒数='+new Date().getSeconds())
    }, 1000)
  }
}
</script>

• 如果需要，可以在钩子函数beforeDestroy中清除定时器

<script>
export default {
  data () {
    return {
      msg: '',
      timer:null //接收定时器id
    }
  },
  mounted(){
    this.timer = setInterval(() => {
      console.log('当前秒数='+new Date().getSeconds())
    }, 1000)
  },
  beforeDestroy(){
    console.log('此组件将被销毁')
    clearInterval(this.timer)
  }
}
</script>