ajax和settimeout的执行顺序,深入理解setTimeout async promise执行顺序

下面是今日头条的一道前端面试题：

async function async1() {

console.log("async1 start");

await async2();

console.log("async1 end");

}

async function async2() {

console.log("async2");

}

console.log("script start");

setTimeout(function() {

// setTimeout放入event-loop中的macro-tasks队列，暂不执行

console.log("setTimeout");

}, 0);

async1();

new Promise(function(resolve) {

console.log("promise1");

resolve();

}).then(function() {

console.log("promise end");

});

console.log("script end");

运行结果：

script start

async1 start

async2

promise1

script end

promise end

async1 end

setTimeout

这里涉及到Microtasks、Macrotasks、event loop 以及 JS 的异步运行机制。

一、 单线程模型

单线程模型指的是，JavaScript 只在一个线程上运行。也就是说，JavaScript 同时只能执行一个任务，其他任务都必须在后面排队等待。

注意，JavaScript 只在一个线程上运行，不代表 JavaScript 引擎只有一个线程。事实上，JavaScript 引擎有多个线程，单个脚本只能在一个线程上运行(称为主线程)，其他线程都是在后台配合。

二、同步任务和异步任务

程序里面所有的任务，可以分成两类：同步任务(synchronous)和异步任务(asynchronous)。

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。

异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果)，该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。

举例来说，Ajax 操作可以当作同步任务处理，也可以当作异步任务处理，由开发者决定。如果是同步任务，主线程就等着 Ajax 操作返回结果，再往下执行；如果是异步任务，主线程在发出 Ajax 请求以后，就直接往下执行，等到 Ajax 操作有了结果，主线程再执行对应的回调函数。

三、任务队列和事件循环

JavaScript 运行时，除了一个正在运行的主线程，引擎还提供一个任务队列(task queue)，里面是各种需要当前程序处理的异步任务。(实际上，根据异步任务的类型，存在多个任务队列。为了方便理解，这里假设只存在一个队列。)

首先，主线程会去执行所有的同步任务。等到同步任务全部执行完，就会去看任务队列里面的异步任务。如果满足条件，那么异步任务就重新进入主线程开始执行，这时它就变成同步任务了。等到执行完，下一个异步任务再进入主线程开始执行。一旦任务队列清空&