JS基础知识二：Event Loop

Event Loop

一、JavaScript是单线程

作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。假如JS是多线程，JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。

二、 任务队列

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务，如果某个任务长时间不能完成，后面任务也要等着。严重影响效率！

所以，任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

总的运行机制：

（1）先执行所有同步任务，按先后顺序都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个任务队列（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件，相对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程只要空了，就会不断重复上面的第三步，一直查看有哪些异步任务结束等待，需要被执行

三、Event Loop

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

四、定时器

"任务队列"除了放置异步任务的事件(比如鼠标点击、页面滚动等等)，还可以放置定时事件，即指定某些代码在多少时间之后执行

定时器功能主要由setTimeout()和setInterval()这两个函数来完成，内部运行机制完全一样

setTimeout( fn(),时间 ) 隔多少时间执行一次fn()函数

setInterval( fn() , 时间 )每隔多少时间执行一次fn()函数，一直循环

示例：以setTimeout()为例

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

输出1，3，2

如果将setTimeout()的第二个参数设为0，就表示同步任务全部执行完，立即执行（0毫秒间隔）指定的回调函数。

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

输出 2，1

• 总之，setTimeout(fn,0)的含义是，执行完同步任务之后，成为最早执行的异步任务

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加上

需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

五、Node.js的Event Loop

（1）V8引擎解析JavaScript脚本

（2）解析后的代码，调用Node API

（3）libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个Event Loop（事件循环），以异步的方式将任务的执行结果返回给V8引擎

（4）V8引擎再将结果返回给用户

除了setTimeout和setInterval这两个方法，Node.js还提供了另外两个与"任务队列"有关的方法：process.nextTick和setImmediate。

process.nextTick()方法可以在当前"执行栈"的尾部----即总是发生在所有异步任务之前----触发回调函数。

process.nextTick(function A() {
  console.log(1);
  process.nextTick(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log(3);
}, 0)

输出1,2,3

• 如果有多个process.nextTick语句（不管它们是否嵌套），将全部在所有异步任务之前执行

setImmediate方法则是在当前"任务队列"的尾部添加事件，也就是说，它指定的任务总是在下一次Event Loop时执行，这与setTimeout(fn, 0)很像。

setImmediate(function A() {
  console.log(1);
  setImmediate(function B(){console.log(2);});
});

setTimeout(function timeout() {
  console.log(3);
}, 0);

答案是不确定，执行结果可能是1,2,3 ； 也有可能是3,1,2