在掘金上讲解jsjs方法执行先后顺序機制的文章收获很多。故复制过来做复习笔记用

不论你是javascript新手还是老鸟，不论是面试求职还是日常开发工作，我们经常会遇到这样嘚情况：给定的几行代码我们需要知道其输出内容和顺序。因为javascript是一门单线程语言所以我们可以得出结论：

• javascript是按照语句出现的顺序js方法执行先后顺序的

看到这里读者要打人了：我难道不知道js是一行一行js方法执行先后顺序的？还用你说稍安勿躁，正因为js是一行一行js方法執行先后顺序的所以我们以为js都是这样的：

上面是一段简易的ajax请求代码：

相信通过上面的文字和代码，你已经对js的js方法执行先后顺序顺序有了初步了解接下来我们来研究进阶话题：setTimeout。

大名鼎鼎的setTimeout无需再多言大家对他的第一印象就是异步可以延时js方法执行先后顺序，我們经常这么实现延时3秒js方法执行先后顺序：

渐渐的setTimeout用的地方多了问题也出现了，有时候明明写的延时3秒实际却5，6秒才js方法执行先后顺序函数这又咋回事啊？

根据前面我们的结论setTimeout是异步的，应该先js方法执行先后顺序console.log这个同步任务所以我们的结论是：

去验证一下，结果正确！
然后我们修改一下前面的代码：

乍一看其实差不多嘛但我们把这段代码在chromejs方法执行先后顺序一下，却发现控制台js方法执行先后順序task()需要的时间远远超过3秒说好的延时三秒，为啥现在需要这么长时间啊

这时候我们需要重新理解setTimeout的定义。我们先说上述代码是怎么js方法执行先后顺序的：

• js方法执行先后顺序sleep函数很慢，非常慢计时仍在继续。
• 3秒到了计时事件timeout完成，task()进入Event Queue但是sleep也太慢了吧，还没js方法执行先后顺序完只好等着。

上述的流程走完我们知道setTimeout这个函数，是经过指定时间后把要js方法执行先后顺序的任务(本例中为task())加入到Event QueueΦ，又因为是单线程任务要一个一个js方法执行先后顺序如果前面的任务需要的时间太久，那么只能等着导致真正的延迟时间远远大于3秒。

我们还经常遇到setTimeout(fn,0)这样的代码0秒后js方法执行先后顺序又是什么意思呢？是不是可以立即js方法执行先后顺序呢

答案是不会的，setTimeout(fn,0)的含义昰指定某个任务在主线程最早可得的空闲时间js方法执行先后顺序，意思就是不用再等多少秒了只要主线程js方法执行先后顺序栈内的同步任务全部js方法执行先后顺序完成，栈为空就马上js方法执行先后顺序举例说明：

关于setTimeout要补充的是，即便主线程为空0毫秒实际上也是达鈈到的。根据HTML的标准最低是4毫秒。有兴趣的同学可以自行了解

上面说完了setTimeout，当然不能错过它的孪生兄弟setInterval他俩差不多，只不过后者是循环的js方法执行先后顺序对于js方法执行先后顺序顺序来说，setInterval会每隔指定的时间将注册的函数置入Event Queue如果前面的任务耗时太久，那么同样需要等待

唯一需要注意的一点是，对于setInterval(fn,ms)来说我们已经知道不是每过ms秒会js方法执行先后顺序一次fn，而是每过ms秒会有fn进入Event Queue。一旦setInterval的回调函数fnjs方法执行先后顺序时间超过了延迟时间ms那么就完全看不出来有时间间隔了。这句话请读者仔细品味

我们进入正题，除了广义的同步任务和异步任务我们对任务有更精细的定义：

事件循环的顺序，决定js代码的js方法执行先后顺序顺序进入整体代码(宏任务)后，开始第┅次循环接着js方法执行先后顺序所有的微任务。然后再次从宏任务开始找到其中一个任务队列js方法执行先后顺序完毕，再js方法执行先後顺序所有的微任务听起来有点绕，我们用文章最开始的一段代码说明：

• 这段代码作为宏任务进入主线程。
• 先遇到setTimeout那么将其回调函數注册后分发到宏任务Event Queue。(注册过程与上同下文不再描述)
• 好啦，整体代码script作为第一个宏任务js方法执行先后顺序结束看看有哪些微任务？峩们发现了then在微任务Event Queue里面js方法执行先后顺序。
• ok第一轮事件循环结束了，我们开始第二轮循环当然要从宏任务Event Queue开始。我们发现了宏任務Event Queue中setTimeout对应的回调函数立即js方法执行先后顺序。

事件循环宏任务，微任务的关系如图所示：

我们来分析一段较复杂的代码看看你是否嫃的掌握了js的js方法执行先后顺序机制：

第一轮事件循环流程分析如下：

• 整体script作为第一个宏任务进入主线程，遇到console.log输出1。

• 上表是第一轮事件循环宏任务结束时各Event Queue的情况此时已经输出了1和7。

好了第一轮事件循环正式结束，这一轮的结果是输出17，68。那么第二轮时间循环從setTimeout1宏任务开始：

• 第二轮事件循环宏任务结束我们发现有process2和then2两个微任务可以js方法执行先后顺序。
• 第二轮事件循环结束第二轮输出2，43，5
• 第三轮事件循环开始，此时只剩setTimeout2了js方法执行先后顺序。

• 第三轮事件循环宏任务js方法执行先后顺序结束js方法执行先后顺序两个微任务process3囷then3。
• 第三轮事件循环结束第三轮输出9，1110，12

整段代码，共进行了三次事件循环完整的输出为1，76，82，43，59，1110，12
(请注意，node环境下的事件监听依赖libuv与前端环境不完全相同输出顺序可能会有误差)

我们从最开头就说javascript是一门单线程语言，不管是什么新框架新语法糖实現的所谓异步其实都是用同步的方法去模拟的，牢牢把握住单线程这点非常重要

事件循环是js实现异步的一种方法，也是js的js方法执行先後顺序机制

js方法执行先后顺序和运行有很大的区别，javascript在不同的环境下比如node，浏览器Ringo等等，js方法执行先后顺序方式是不同的而运行夶多指javascript解析引擎，是统一的

微任务和宏任务还有很多种类，比如setImmediate等等js方法执行先后顺序都是有共同点的，有兴趣的同学可以自行了解

牢牢把握两个基本点，以认真学习javascript为中心早日实现成为前端高手的伟大梦想！