Javascript执行机制（setTimeout/Promise）

1.关于javscript

javascript是一门单线程语言，在最近的html5中提出了web-worker，但javascript是单线程这一核心仍未改变，所以一切javascript版的“多线程”都是用单线程模拟出来的，javascript就是一门单线程语言。

2.javscript的事件循环

既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也需要一个一个的顺序执行。如果一个任务耗时过长，那么最后一个任务也必须等着。那么问题来了，如果我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一只卡到图片完全现实出来？因此聪明的程序员将任务认为两类：同步任务，异步任务

当我们打开网站时，网页渲染过程就是一大堆同步任务。执行过程用文字描述的话就是

1.同步任务和异步任务分别进入不同的执行场所，同步的进去主线程，异步的进入enent table并注册函数。

2.当指定的事情完成时，event table会将这个函数移步到 event queue

3.主线程的任务执行完毕为空，会去event queue读取对应的函数，进入主线程执行

4.上诉过程会不断重复，也就是常说的event loop（事件循环）

实例图：

疑问是：那怎么直到主线程的执行栈为空啊？原因是：js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去event queue那里检查是否用等待被调用的函数。

3.setTimeout 的执行方式是异步执行，用处一般为，延迟指定时间再执行移步函数。

根据前面的结论，上诉代码的打印顺序为 2，三秒后打印1 ，印证正确。

但是当遇到下面代码的时候

结果是打印1 的结果需要的时间远远超过3秒，这不符合我们想要的预期，我们想要的就是三秒后打印1 ，那么先看一下执行结果

1.console.log（1）进入event table并注册，计时开始

2.执行sleep函数，很慢，但是event table里的计时仍在继续

3.3s到了 计时事件完成，console.log（1）进去event queue，但是此时主线程里的sleep还没有执行完成，console.log（1）只能继续等

4.sleep执行完啦，console.log（1）进入主线程，从而执行

我们知道setTimeout 这个函数，是经过指定时间后，把要执行的任务加到event queue中，又因为单线程任务需要一个一个的执行，如果前面的任务需要的时间太久，此时setTimeout 的延时时间就会出现比较大的偏差。

4.setInterval

对于执行顺序而言，setInterval会每隔指定的时间将注册的函数只如event queue，如果前面任务耗时太久，那么同样需要等待。

唯一需要注意一点的是，对于setInterval而言，我们知道不是每过指定时间就执行fn，而是每过指定时间就会有fn进入event queue。一旦setInterval的回调函数执行时间超过了延迟的时间，那么就完全看不出来有时间间隔了。

5.promise

对于promise而言，我们需要对js的执行了解的更细致一些，如下

1.macro-task（宏任务）：包括整体script代码，setInterval，setTimeout

2.micro-task（微任务）：promise ，process.nexttrick（nodejs的内容）

不同类型的任务会进入对应的event queue，比如setInterval，setTimeout会进入相同的event queue。

事件循环的顺序决定js代码的执行顺序。进入整体代码（宏任务）后，开始第一次循环。接着执行所有的微任务。然后再从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。看一下代码

分析一下上图代码，加深一下理解，（1）这段代码作为宏任务进入主线程，先遇到settimeout，那么将其回调函数分发到宏任务的event queue上，（2）接下来遇到promise，new promise立即执行，then函数分发到微任务的event queue中，（3）接下来遇到console.log（）立即执行。（4）然后，整体script代码作为第一个宏任务执行结束，看看有哪些微任务，我们发现then在微任务event queue里，则执行，（5）第一轮循环事件结束，开始第二轮循环，当然是从宏任务的event queue开始，我们发现了宏任务event queue中的settimeout对应的回调函数，则立即执行。

图例如下：

6.下面一个例子练习

详细解答一定要看 ：https://juejin.im/post/59e85eebf265da430d571f89

结语：

1。javascript是一门单线程语言

2.Event Loop 是javascript的执行机制。

作者：三寸日光_梦尧
链接：https://www.jianshu.com/p/92f4506a28d0
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

一、引子

本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手：

这一题看似很简单，但如果你不了解JavaScript运行机制，很容易就答错了。题目的答案是依次输出1 2 3，如果你有疑惑，下文有详细解释。

二、理解JS的单线程的概念

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

三、理解任务队列(消息队列)

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。JavaScript语言的设计者意识到这个问题，将所有任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。接下来我们通过两个例子说明同步任务和异步任务的区别：

如果你的回答是A,恭喜你答对了，因为这是同步任务，程序由上到下执行，遇到while()死循环，下面语句就没办法执行。

如果你的答案是A，恭喜你现在对js运行机制已经有个粗浅的认识了！题目中的setTimeout()就是个异步任务。在所有同步任务执行完之前，任何的异步任务是不会执行的，关于这点下文还会详细说明。

四、理解Event Loop

异步执行的运行机制如下：

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。主线程不断重复上面的第三步。主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会循环反复。以下这张图可以很好说明这点。

五、哪些语句会放入异步任务队列及放入时机

一般来说，有以下四种会放入异步任务队列：

setTimeout和setlntervalDOM事件ES6中的PromiseAjax异步请求javascript 代码运行分两个阶段：

1、预解析---把所有的函数定义提前，所有的变量声明提前，变量的赋值不提前

2、执行---从上到下执行（按照js运行机制）

至于放入异步任务队列的时机，我们通过 setTimeout的例子和Ajax例子来详细说明：

for循环一次碰到一个 setTimeout()，并不是马上把setTimeout()拿到异步队列中，而要等到一秒后，才将其放到任务队列里面，一旦"执行栈"中的所有同步任务执行完毕（即for循环结束，此时i已经为5），系统就会读取已经存放"任务队列"的setTimeout()（有五个），于是答案是输出5个5。

上面也提到，在到达指定时间时，定时器就会将相应回调函数插入“任务队列”尾部。这就是“定时器（timer）”功能。

关于定时器的重要补充：

定时器包括setTimeout与 setInterval 两个方法。它们的第二个参数是指定其回调函数推迟/每隔多少毫秒数后执行。

对于第二个参数有以下需要注意的地方：当第二个参数缺省时，默认为 0；当指定的值小于 4 毫秒，则增加到 4ms(4ms 是 HTML5 标准指定的，对于 2010 年及之前的浏览器则是 10ms);也就是说至少需要4毫秒，该setTimeout()拿到任务队列中。

ajax加载完成时才会放入异步队列，至于这段时间不确定，所有有两种情况：①大于100ms,最后的结果是 d c b a ;②小于100ms,最后的结果便是d c a b。

六、题外话

如果要输出0~4，上面例题应该如何修改？

1. 将var变为let

2. 加个立即执行函数

3. 也可以通过这样加闭包

来自;https://baijiahao.baidu.com/s?id=1615713540466951098&wfr=spider&for=pc