定时器原理剖析

前几天遇见一个棘手的问题，简单来说，在vue实例中用v-if控制a组件的显现/隐藏，当a隐藏后，我在其内部设置的setInterval依旧会执着地执行。。一番折腾后，发现了其中的原因：

当组件移除/router切换时，组件确实已经被摧毁了，如果在created钩子函数里添加输出，可以看到每次重新加入/切换回来的时候都会触发，其实，这与组件的机制无关。

setInterval/setTimeout相当于你申请的一种资源，在指定的时间后/时间间隔中执行指定的操作，只能由你手动释放。

setTimeout 指定时间后将任务放进任务队列，在引擎空闲时执行；

setInterval 每隔一段时间将任务放入任务队列；

接下来通过几个实例来剖析一下定时器的原理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    </body>
    <script> 
        var a= setTimeout(()=>{
            alert(1)
        },2000)
        console.log(a) //1
        clearTimeout(a)
        document.write(a)//1
        
        //多次设置，累加
        a= setTimeout(()=>{
            alert(1)
        },2000)
        clearTimeout(a)
        document.write(a) //2
    </script>
</html>

View Code

分析：当创建一个定时器时，会返回一个ID作为其唯一标示，这就是type of(定时器)为number的原因，随着更多定时器的调用ID累加

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
    <script> 
        var a= setTimeout(()=>{
            alert(1)
        },2000)
        a= undefined //定时器依旧有效
        document.write(a) //undefined
        
        setTimeout(()=>{
            console.log(a) //undefined
        },4000)
    </script>
</html>

剖析：清除定时器的唯一方法是clearTimeout/clearInterval，即使将定时器设为undefined，也只是改变了a的值，请求的资源依旧存在！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        var a= setTimeout(()=>{
            alert(1)
        }, 1000)
        a= setTimeout(()=>{
            alert(2)
        }, 1100)
        //重复设置会累加!因此得先清除
    </script>
</html>

剖析：重复定义的不会覆盖之前申请的资源，这也是重复设置setInterval会越来越快的原因，之前请求的资源依旧有效！

额外的补充->当我们在项目中定义了许多的定时器，如何一次性清除？可参考：https://www.cnblogs.com/daysme/p/6428439.html

posted @ 2018-01-21 10:48 炎泽阅读(459) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

炎泽

定时器原理剖析

公告