JS 设置定时器与清除定时器

在前端，一些功能的实现需要用到定时器：轮询、定时开关弹窗、秒表、定时跳转等。。

一、设置定时器

window提供两个方法实现：setTimeout、setInterval

setInterval()：使一段代码每过一段时间就执行一次，比如轮询

setInterval(() => {
   console.log('setInterval定时器') 
}, 1000)

setTimeout()：使一段代码在指定时间后运行,运行一次

setInterval(() => {
   console.log('setTimeout定时器') 
}, 1000)　

二、缺陷

1. 定时器任务由同一线程调度，是异步任务，在所有同步任务之后执行，需考虑串行任务时间问题。
2. 定时器不会自动销毁（内存无法自己回收）必须手动清除，定时轮询会卡死。

三、清除定时器

定时器调用时会返回一个定时器序号（Number），表示第几个定时器，可以通过序号对其进行清除

let intervalTimer = setInterval(() => {
   console.log('intervalTimer') 
}, 1000)
// 清除setInterval
clearInterval(intervalTimer)

let timeoutTimer = setTimeout(() => {
   console.log('timeoutTimer') 
}, 1000)
// 清除setTimeout

clearInterval(timeoutTimer)

四、应用

如果在项目中使用的是vue/react等框架可以在销毁页面钩子函数中清除，例：vue2  beforeDestory()

<script>

export default {

　　data() {

　　　　return {

　　　　　　timer: null

　　　　}

　　},

　　methods: {

　　　　fun(){

　　　　　　this.timer = setTimeout(() => {

　　　　　　　　// 执行代码

　　　　　　}， 1000)

　　　　}

　　},

　　beforeDestory() {

　　　　clearTimeout(this.timer)

　　}

};

</script>

如果是在原生js中，可以判断html中的dom元素是否存在来进行清除。

<script>
    var timer
    function testTIme() {
        clearTimeout(timer)
        if(documnet.getElementById('time') === null) return
        timer = setTImeout(() => {
            //执行代码
        }, 1000)
    }
</script>        

五、注意

setInterval无视代码错误以及延迟，有错误照样循环执行，延迟即一直等待！