最近本人对于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（事件循环）。
图片来自Philip Roberts的演讲《Help, I'm stuck in an event-loop》
如图，WebAPIs就是js线程外部的api如我们刚刚所说浏览器为异步任务所开辟的线程。而任务队列就是callbackqueue，我们知道任务队列中其实就是各种异步任务的回调函数，从callbackqueue的直译“回调队列”也可看出。而heap堆和stack栈组成了js的主线程，当stack中的函数执行完成后，就会在callbackqueue中寻找下一个任务并把它推入栈，这个寻找的过程就叫event loop（事件循环）。
看了上面你是不是对js的运行机制有了了解呢~
我们把学会的知识来用一用：
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_22855325/article/details/72958345（赞~）
https://www.cnblogs.com/woodyblog/p/6061671.html(重点参考这篇文章博主写得很好~）
http://blog.csdn.net/kfanning/article/details/5768776（赞~）
http://www.ruanyifeng.com/blog/2014/10/event-loop.html（阮一峰老师嘛~）
http://www.cnblogs.com/smght/p/4368399.html#3575993（赞~）
网友评论