摘要：当主线程开始执行异步任务，实际就是执行对应的回调函数。异步任务必须指定回调函数。所以注意的是，只是将事件插入了任务队列，必须等到当前代码执行栈执行完，主线程才会去执行它指定的回调函数。
最近本人对于js的运行机制，特别是异步，还有回调函数感觉很乱，于是参考了很多有用的博客（博客原文地址会在文末给出），整理如下：
js单线程我们都知道，Javascript语言的执行环境是"单线程"（single thread）。也就是说，浏览器只分配给js一个主线程用来执行任务即函数，但是每次只能执行一个任务，只有等到当前任务执行完成后，才执行后面的任务，这些任务形成一个任务队列排队等候执行，这一点和我们日常的排队很像，譬如排队买奶茶，只有等到前面一个人买完奶茶付完钱，排在他后面的人才可以买奶茶。但是，当前面一个任务很耗时时，后面的任务就不得不等着，这时候整个程序的执行效率就会下降，就像我们平时遇到的浏览器无响应即页面假死往往是因为某段js代码长时间运行如死循环，导致页面卡死，后面的任务无法执行。
讲到js的单线程，就不得不来了解一下浏览器
浏览器多线程
如图，浏览器是一个多线程的执行环境，在浏览器的内核中分配了多个线程，其中浏览器常驻三大线程: js引擎线程，GUI渲染线程，浏览器事件触发线程。最主要的线程之一即是js引擎的线程。由于这三个线程同时要访问DOM树，所以为了线程安全，浏览器内部需要做互斥即当JS引擎在执行代码的时候，界面渲染和事件响应两个线程是被暂停的。而所以当JS出现死循环，浏览器无法响应点击，也无法更新界面。
前面说到，前端会有一些任务十分耗时，而由于js是单线程使用会降低执行效率，这些耗时的任务如网络请求，定时器和事件监听。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的（见图）。（详细过程见此博文，博主讲得很好~ 个人建议必须看一看哦~）
任务队列说回刚刚的js单线程，为了不让前面的耗时任务导致的问题出现，js的设计者把js的任务分为同步任务和异步任务。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。如我们刚刚所讲到的浏览器为网络请求开辟的http请求线程就是异步任务。
具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）
（1）所有同步任务都在主线程上执行，形成一个[执行栈]。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。
(参考与阮一峰老师的博文JavaScript 运行机制详解：再谈Event Loop）
回调函数有了以上了解我们可以知道，主线程内的同步任务执行完毕后，就会执行排在任务队列第一位的异步任务，这个过程不断重复。
当主线程开始执行异步任务，实际就是执行对应的回调函数。
我们来看一下例子：
setTimeout(function(){
console.log("Hello");
}，10）;
执行这段代码，浏览器异步执行计时操作（注意这里的浏览器模型定时计数器并不是由JavaScript引擎计数的），当10ms到了之后，就会触发定时事件，这时就会把其中的回调函数放到任务队列中，所以当主线程空闲时在任务队列中“读取”并且执行的就是回调函数。
异步任务必须指定回调函数。
Event Loop主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
如图，WebAPIs就是js线程外部的api如我们刚刚所说浏览器为异步任务所开辟的线程。而任务队列就是callbackqueue，我们知道任务队列中其实就是各种异步任务的回调函数，从callbackqueue的直译“回调队列”也可看出。而heap堆和stack栈组成了js的主线程，当stack中的函数执行完成后，就会在callbackqueue中寻找下一个任务并把它推入栈，这个寻找的过程就叫event loop（事件循环）。
看了上面你是不是对js的运行机制有了了解呢~
我们把学会的知识来用一用：
说起js的异步，很多人第一反应是Ajax，但其实js中最基础的异步就是setTimeout/setInterval。（小伙伴可不要把定时器忘了哦：））
我们以setTimeout为例，setTimeout接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。
我们看看例子：
setTimeout(function(){
console.log(0);
},0)
console.log(1);
// 1
// 0
是不是以为打印的顺序是0,1？但大家注意哦，这时候浏览器打印的顺序是1，0。大家可能疑问了，setTimeout中设置的推迟执行的毫秒数是0呀，不就是立即执行的意思吗。大家还记得刚刚我们说了当有耗时任务时，会把它放在任务队列中等待主线程空闲然后再执行，实际在执行程序的时候，浏览器会默认setTimeout以及ajax请求这一类的方法都是耗时程序（尽管可能不耗时），也就是上面说过的浏览器会为其异步开辟线程。所以此时的setTimeout尽管它推迟时间为0，但是js不会立即执行，而是把它加入任务队列，当执行完执行栈的同步任务也就是打印1后，再执行setTimeout的回调函数，打印0。
总之，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。
所以注意的是，setTimeout()只是将事件插入了任务队列，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。但如果当前任务十分耗时，需要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行，比如说你指定10ms后执行，但是当前的任务执行了20ms，所以setTimeout的回调函数并不能在10ms后立即执行，可能要20ms后，如果setTimeout在任务队列中不是排第一位，可能还不止20ms。
js异步编程的方法这个我还不是很懂~大家可以参考阮一峰老师的Javascript异步编程的4种方法
希望一包的文章可以帮到你们~
参考文章：
http://blog.csdn.net/qq_22855...（赞~）
https://www.cnblogs.com/woody...）
http://blog.csdn.net/kfanning...（赞~）
http://www.ruanyifeng.com/blo...（阮一峰老师嘛~）
http://www.cnblogs.com/smght/...（赞~）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107773.html
摘要：严格来说，并不是单线程的。其他异步和事件驱动相关的线程通过来实现内部的线程池和线程调度。线程是最小的进程，因此也是单进程的。子进程中执行的是非程序，提供一组参数后，执行的结果以回调的形式返回。在子进程中通过和的机制来接收和发送消息。 node遵循的是单线程单进程的模式，node的单线程是指js的引擎只有一个实例，且在nodejs的主线程中执行，同时node以事件驱动的方式处理IO...
摘要：主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。上面也提到，在到达指定时间时，定时器就会将相应回调函数插入任务队列尾部。这就是定时器功能。关于定时器的重要补充定时器包括与两个方法。 一、引子 本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手： console.log(1); setTimeout(function()...
摘要：主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。上面也提到，在到达指定时间时，定时器就会将相应回调函数插入任务队列尾部。这就是定时器功能。关于定时器的重要补充定时器包括与两个方法。 一、引子 本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手： console.log(1); setTimeout(function()...
摘要：主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。上面也提到，在到达指定时间时，定时器就会将相应回调函数插入任务队列尾部。这就是定时器功能。关于定时器的重要补充定时器包括与两个方法。 一、引子 本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手： console.log(1); setTimeout(function()...
摘要：主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。上面也提到，在到达指定时间时，定时器就会将相应回调函数插入任务队列尾部。这就是定时器功能。关于定时器的重要补充定时器包括与两个方法。 一、引子 本文介绍JavaScript运行机制，这一部分比较抽象，我们先从一道面试题入手： console.log(1); setTimeout(function()...
阅读 1436·2021-11-25 09:43
阅读 1574·2021-11-24 10:41
阅读 2971·2021-09-27 13:36
阅读 1040·2021-09-10 10:50
阅读 692·2019-08-30 15:53
阅读 3431·2019-08-30 15:44
阅读 711·2019-08-30 14:03
阅读 2453·2019-08-29 16:38
