JavaScript运行机制详解

var test = function(){

    alert("test");

}

var test2 = function(){

    alert("test2");

}

setTimeout(function(){

   alert("setTimeout");

},1000);

test();

test2();

//test

//test2

//setTimeout;

上面代码的运行结果一直让我很费解，为什么test()和test2()没有在setTimeout()之后才执行，相当于先执行了定时器外面的函数，而后再执行定时器里的函数，这是为什么呢？在解释之前，我们有必要知道JavaScript的运行机制。
***

一、JavaScript为什么是单线程

要回答这个问题，只要我们假设一下，如果JavaScript支持多线程，一个线程在某个DOM节点上添加内容，另外一个线程删除了这个节点，那么浏览器该以哪个线程为准呢？所以答案也就不言而喻了。为了避免复杂性，JavaScript从诞生就是单线程。
在HTML5中，推出了web worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程的控制，且不得操作DOM，所以也是没有违背JavaScript单线程的本质。
***

二、任务队列

因为JavaScript是单线程，意味着任务要一个接着一个完成，但是，如果前一个任务执行时间很长，那么后面的任务就得一直阻塞着，这样用户体验十分差。
JavaScript的设计者考虑到了这一点，所以他将JavaScript的任务分为两种，在主线程上执行的任务"同步任务"，被主线程挂载起来的任务"异步任务",后者一般是放在一个叫任务队列的数据结构中。
那么一般异步执行运行机制如下(也是JavaScript的运行机制)：

(1)所有同步任务都在主线程上执行，形成一个执行栈。
(2)主线程之外，还有一个“任务队列”,只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。
(3)一旦“执行栈”中的所有同步任务执行完毕了，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
(4)主线程不断重复上面的三步。（事件循环）

参考图片(图片来源阮一峰老师讲解的JavaScript运行机制详解)

三、事件和回调函数

看了前面的讲解，我一开始提出的问题视乎可以这样理解，test()和test2()属于“执行栈”中的同步任务，而定时器则是任务队列里面的异步任务，那么定时器就是属于异步任务中的一种，在讲定时器之前先认识一下任务队列里面的另外一个重要成员，事件。其实任务队列就是一个事件队列，因为一般我们绑定一个事件，比如点击事件等等，都是在某一个时刻才触发执行的，这个时候就得放到任务队列里面，等待执行，而在某个DOM节点上绑定了事件，就要有相应的回调函数,它们是相辅相成的。
所谓回调函数，就是那些被挂载起来，等待执行的代码，主线程执行任务队列里面的异步任务，其实就是执行这些回调函数。
一般只有主线程所有任务都执行完毕了，才会执行任务队列里面的异步任务，一般是按照队列的“先进先出”顺序执行，但是因为存在定时器，所以主线程要检查执行时间，只有到了规定的时间，才能返回主线程。
***

四、定时器

终于到特殊的定时器了，定时器主要由setTimeout()和setInterval()两个函数来完成，它们的内部运行机制完全一样，不同的只是，前者一次性执行，而后者反复执行。定时器，属于任务队列中的异步任务，所以才会出现上面的问题，再看几个例子就能理解了，

console.log(1);

setTimeout(function(){ console.log(2);},1000);

console.log(3);

上面代码的执行结果是1,3,2，因为只有setTimeout里面的代码是异步任务，其它都是主线程里的同步任务，所以只有执行完了主线程中的所有任务，才会执行setTimeout中的任务。

参考:https://www.cnblogs.com/mcray/p/6938417.html