JS中定时器线程理解

曾经终败给现在 2022-03-07 01:50 176阅读 0赞

最近在准备面试，对于JS原理性的文章，感觉很有必要系统整理下，不必每一次都要查询资料，节约时间。

**问题**

setTimeout(function(){
        console.log("开始执行定时器回调: "+ new Date())
        console.log("我是定时器")
    },0)

大家觉得这个定时器定时时间设为0，有意义吗？是否觉得上述代码效果等同于

console.log("开始执行定时器回调: "+ new Date())
    console.log("我是定时器")

实践是检验真理的最好途径。我们不排斥拿来主义，但是如果能自己实践验证，对于提升自身格物致知的精神很有裨益。针对上述问题，我们用两个实验来解开答案：  
***实验一：***

console.log("1")
    console.log("我是定时器")
    console.log("2")

打印结果

![clipboard.png][]

***实验二：***

console.log("1")
    setTimeout(function(){
        console.log("我是定时器")
    },0)
    console.log("2")

打印结果

![clipboard.png][clipboard.png 1]

通过上述两个实验结果，我们可以得知 定时器定时为0时，JS执行到定时器这一步，并不是直接开始执行定时回调，而是执行了后续代码之后，才执行。

那为什么会这样呢？  
我们仍然拿两个例子来说明：  
***实验三：***

console.log("1")
        console.log("定时器线程开始计时: "+ new Date())
        setTimeout(function(){
            console.log("开始执行定时器回调: "+ new Date())
        },5000)
        for(var i=0;i<500;i++){
            console.log("我是循环")
        }
        console.log("事件队列最后一位: "+ new Date())

打印结果：

![clipboard.png][clipboard.png 2]

从结果中可以看出，从定时器线程开始定时，到定时5秒结束后，将定时回调事件放入事件队列中执行，用了5秒。

***实验四：***

console.log("1")
        console.log("定时器线程开始计时: "+ new Date())
        setTimeout(function(){
            console.log("开始执行定时器回调: "+ new Date())
        },5000)
        for(var i=0;i<50000;i++){
            console.log("我是循环")
        }
        console.log("事件队列最后一位: "+ new Date())

打印结果：

![clipboard.png][clipboard.png 3]

从结果中可以看出，从定时器线程开始定时，到定时5秒结束后，将`定时回调事件`放入`事件队列`中执行，用了9秒。

两次结果不一致，是因为JS代码执行到定时器时，此时`定时器线程`开始定时，定时时间到之后，将`定时回调事件`推入`事件队列`而`最后`，JS线程依据`事件队列`中顺序执行。而之所以有的延时5秒，有的延时9秒，是因为如果定时器开始计时时，`JS事件队列`中执行剩余的事件小于5秒，则定时结束后，将`定时回调事件`推入队列中，JS能够立即执行`定时回调事件`，所以是5秒；而如果`JS事件队列`中执行剩余的事件大于5秒，那么在定时结束后，将`定时回调事件`推入队列后，还需一些时间来执行`定时回调事件`之前的事件，所以为9秒。

![clipboard.png][clipboard.png 4]

[clipboard.png]: /images/20220307/ca98034000f14929aa1476997160004c.png
[clipboard.png 1]: /images/20220307/ac878b8c2da44ad0a92f18dc1ae1450e.png
[clipboard.png 2]: /images/20220307/6c80f45a93964335b1570699dabf8d0b.png
[clipboard.png 3]: /images/20220307/177ec8147378449182b4d13230daec79.png
[clipboard.png 4]: /images/20220307/38212715756f406db9db5ade01def1b7.png