前端—— 事件循环、同步、异步

Javascript特征:

• 作为单线程的语言，javascript一次只能执行一项任务，其他的任务都必须按照次序排队等待被执行，只有当下的任务执行完成，才可以执行下个任务。
• 有一个基于事件循环的并发模式，事件循环负责执行代码、收集和处理事件以及执行队列的子任务。（区别于C Java）

事件循环机制（Event Loop）：
脚本执行的时候，js解析器会将代码从上往下解析。
在这个过程中，当解析器遇到同步任务的时候，会从行往下依次将同步任务压入到调用栈call stack中，进行执行。
当解析器遇到异步任务的时候，不会一直等待其返回结果，而是将这个任务挂起到浏览器其他的模块进行处理，继续执行调用栈中的任务，直到异步事件返回结果的时候，会将其放到事件队列中等待执行，但是并不会立即执行异步任务的回调函数。
当调用栈所有任务都执行完毕时，主线程处于闲置状态的时候，会查找事件队列会否有任务，如果有任务的时候，调用栈会依次把队列中事件的回调
放入执行栈中，然后执行其中的同步代码…如此往复，这样就形成了一个无限循环。

同步任务：
区分于一部分任务，可以立即执行，比如 for 循环，console.log（）等等

异步任务：
不能立即执行的任务，异步任务又分为微任务和宏任务，同一队列中，微任务（Promise）会先于宏任务 (事件、计时器、Ajax、script整体代码）执行。

 //ps:
 new Promise(function(resolve, reject) {//这里是同步任务
    console.log(3);
    resolve();
})
promise.then(function() {//这里是异步任务
    console.log(4);
})

new Promise(function(resolve){
    console.log(1);
    resolve();
}).then(function(){
    console.log(2);
}).then(function(){
    console.log(3);
})
console.log(4);     // 打印结果 1  4  2 3

调用栈（Call Stack）：
是一种后进先出的数据结构。脚本执行的时候，js解析此代码，并将其中的同步代码按照执行顺序加入到调用栈中，然后从头开始执行。

事件队列（Task Queue）：
当浏览器解析js代码遇到异步任务的时候，不会一直等待其处理结果，而是会将这个任务交给浏览器的其他的模块进行处理（拿计时器举例子，当被挂起的时候，计时器马上计时，而后面排到队伍里的顺序则按照谁先计时完毕先执行谁），然后call stack继续执行剩下的任务，当一个异步任务返回结果后，js引擎会将这个任务加入到一个先进先出的队列中，正对队列就是事件队列。

可视化描述

测试代码如下：

    var a = 1
    console.log(123);
    setTimeout(function () {
      for (i = 0; i <= 800000000; i++) {
        a += i;
      }
      console.log('第一个计时器', a);
    }, 5000);
    setTimeout(function () {
      console.log('第二个计时器');
    }, 4999)
    // 123
    // 第二个
    // 第一个 320000000067109000

    var a = 1
    console.log(123);
    setTimeout(function () {
      for (i = 0; i <= 800000000; i++) {
        a += i;
      }
      console.log('第一个计时器', a);
    }, 4999);
    setTimeout(function () {
      console.log('第二个计时器');
    }, 5000)
    // 123
    //  第一个计时器 320000000067109000         
    //  第二个计时器