JS中定时器线程理解

tuniutech 发布于2019-08-23 15:21 / 1870人阅读

摘要：两次结果不一致，是因为代码执行到定时器时，此时定时器线程开始定时，定时时间到之后，将定时回调事件推入事件队列而最后，线程依据事件队列中顺序执行。

最近在准备面试，对于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")

打印结果

实验二：

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

打印结果

通过上述两个实验结果，我们可以得知定时器定时为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())

打印结果：

从结果中可以看出，从定时器线程开始定时，到定时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())

打印结果：

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

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

GPU服务器服务器托管 java定时线程 java线程定时 linux 定时线程 java用线程定时

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101920.html

javascript引擎执行的过程的理解--执行阶段

摘要：如果对语法分析和预编译，还有疑问引擎执行的过程的理解语法分析和预编译阶段。参与执行过程的线程分别是引擎线程也称为内核，负责解析执行脚本程序的主线程例如引擎。以上便是引擎执行宏任务的整个过程。一、概述 js引擎执行过程主要分为三个阶段，分别是语法分析，预编译和执行阶段，上篇文章我们介绍了语法分析和预编译阶段，那么我们先做个简单概括，如下： 1、语法分析：分别对加载完成的代码块进行语法...

SnaiLiu 2019-08-23 15:10 评论0 收藏0
javascript引擎执行的过程的理解--执行阶段

摘要：如果对语法分析和预编译，还有疑问引擎执行的过程的理解语法分析和预编译阶段。参与执行过程的线程分别是引擎线程也称为内核，负责解析执行脚本程序的主线程例如引擎。以上便是引擎执行宏任务的整个过程。一、概述 js引擎执行过程主要分为三个阶段，分别是语法分析，预编译和执行阶段，上篇文章我们介绍了语法分析和预编译阶段，那么我们先做个简单概括，如下： 1、语法分析：分别对加载完成的代码块进行语法检验，语...

Achilles 2019-05-23 14:34 评论0 收藏0
Js基础知识（四） - js运行原理与机制

摘要：定时器线程由于是单线程运行，所以不能抽出时间来计时，只能另开辟一个线程来处理定时器任务，等计时完成，把定时器要执行的操作添加到事件任务队列尾，等待引擎线程来处理。已经知道了是单线程运行的，也知道中有同步操作和异步操作。 js运行机制本章了解一下js的运行原理，了解了js的运行原理才能写出更优美的代码，提高运行效率，还能解决开发中遇到的不理解的问题。进程与线程进程是cpu资源分配的...

LMou 2019-08-30 13:55 评论0 收藏0
Js基础知识（四） - js运行原理与机制

摘要：定时器线程由于是单线程运行，所以不能抽出时间来计时，只能另开辟一个线程来处理定时器任务，等计时完成，把定时器要执行的操作添加到事件任务队列尾，等待引擎线程来处理。已经知道了是单线程运行的，也知道中有同步操作和异步操作。 js运行机制本章了解一下js的运行原理，了解了js的运行原理才能写出更优美的代码，提高运行效率，还能解决开发中遇到的不理解的问题。进程与线程进程是cpu资源分配的...

leap_frog 2019-08-26 11:35 评论0 收藏0
Js基础知识（四） - js运行原理与机制

摘要：定时器线程由于是单线程运行，所以不能抽出时间来计时，只能另开辟一个线程来处理定时器任务，等计时完成，把定时器要执行的操作添加到事件任务队列尾，等待引擎线程来处理。已经知道了是单线程运行的，也知道中有同步操作和异步操作。 js运行机制本章了解一下js的运行原理，了解了js的运行原理才能写出更优美的代码，提高运行效率，还能解决开发中遇到的不理解的问题。进程与线程进程是cpu资源分配的...

shevy 2019-08-01 18:32 评论0 收藏0