事件循环

事件循环

同步，异步，宏任务，微任务的执行顺序

1.同步任务和异步任务

JavaScript是单线程执行的语言，在同一个时间只能做一件事情。这就导致后面的任务需要等到前面的任务完成才能执行，如果前面的任务很耗时就会造成后面的任务一直等待。为了解决这个问题JS中出现了同步任务和异步任务。

（1）同步任务
在主线程上排队执行的任务只有前一个任务执行完毕，才能执行后一个任务，形成一个执行栈。

（2）异步任务
不进入主线程，而是进入任务队列，当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行任务、再获取再执行，所以者种机制被叫做事件循环（Event Loop）

2.宏任务与微任务

执行顺序 微任务>宏任务
常见的微任务有Promise、process.nextTick、MutationObserver
常见的宏任务：script、setTimeout、setInterval、setImmediate

3.Event Loop执行顺序为：

先执行宏任务script，并执行里面的同步任务；执行栈为空后查询是否存在微任务，存在就立即执行，然后开始下一轮的事件循环。

4.示例

(1):代码

console.log("script start 1");
    async function async1() {
      await async2(); // new Promise( (res,rej)=> /*立刻执行*/ ).then(()=>{ /*微任务*/ } )
      console.log("async1 end 5");
    }
    async function async2() {
      console.log("async2 end 2"); // 2
    }
    async1();
    setTimeout(function () {
      console.log("setTimeout 8");
    }, 0);
    new Promise((resolve) => {
      console.log("Promise 3");
      resolve();
    })
      .then(function () {
        console.log("promise1 6");
      })
      .then(function () {
        console.log("promise2 7");
      });
    console.log("script end 4");

结果：

script start 1
async2 end 2
Promise 3
script end 4
async1 end 5
promise1 6
promise2 7
setTimeout 8

(2):代码

 async function foo() {
      console.log("foo");//3
    }
    async function bar() {
      console.log("bar	start");//2
      await foo();
      console.log("bar	end");//6
    }
    console.log("script	start"); //1
    setTimeout(function () {
      console.log("setTimeout");//8
    }, 0);
    bar();
    new Promise(function (resolve) {
      console.log("promise	executor");//4
      resolve();
    }).then(function () {
      console.log("promise	then");//7
    });
    console.log("script	end");//5

结果：

script	start
bar	start
foo
promise	executor
script	end
bar	end
promise	then
setTimeout