JavaScript 事件循环机制 JavaScript 关于事件循环机制的刨析

console.log('1, time = ' + new Date().toString()) // 1.进入主线程，执行同步任务，输出1
setTimeout(macroCallback, 0)// 2. 加入宏任务队列 // 7.开始执行此定时器宏任务，调用macroCallback，输出4
new Promise(function (resolve, reject) {//3.加入微任务队列
  console.log('2, time = ' + new Date().toString())//4.执行此微任务中的同步代码，输出2
  resolve()
  console.log('3, time = ' + new Date().toString())//5.输出3
}).then(microCallback)// 6.执行then微任务,调用microCallback,输出5

//函数定义
function macroCallback() {
  console.log('4, time = ' + new Date().toString())
}

function microCallback() {
  console.log('5, time = ' + new Date().toString())
}

var flag = false // 1. 变量声明

Promise.resolve().then(() => {
  // 2. 将 then 任务分发到本轮循环微任务队列中去
  console.log('then1') // 8. 执行 then 微任务， 打印 then1，flag 此时是 true 了
  flag = true
})
new Promise(resolve => {
  // 3. 执行 Promise 里 同步代码
  console.log('promise')
  resolve()
  setTimeout(() => { // 4. 将定时器里的任务放到宏任务队列中
    console.log('timeout2') // 11. 执行定时器宏任务 这边指定了 10 的等待时长, 因此在另一个定时器任务之后执行了
  }, 10)
}).then(function () {
  // 5. 将 then 任务分发到本轮循环微任务队列中去
  console.log('then2') // 9. 执行 then 微任务， 打印 then2，至此本轮 tick 结束
})
function f1(f) {
  // 1. 函数声明
  f()
}
function f2(f) {
  // 1. 函数声明
  setTimeout(f) //  7. 把`setTimeout`中的`f`放到宏任务队列中，等本轮`tick`执行完，下一次事件循环再执行
}
f1(() => console.log('f为：', flag ? '异步' : '同步')) // 6. 打印 `f为：同步`
f2(() => {
  console.log('timeout1,', 'f为：', flag ? '异步' : '同步') // 10. 执行定时器宏任务
})

console.log('本轮宏任务执行完') // 7. 打印

let bar;

// 这个方法用的是一个异步签名，但其实它是同步方式调用回调的
function someAsyncApiCall(callback) { callback(); }

// 回调函数在`someAsyncApiCall`完成之前被调用
someAsyncApiCall(() => {
  // 由于`someAsyncApiCall`已经完成，bar没有被分配任何值
  console.log('bar', bar); // undefined
});

bar = 1;

let bar;

function someAsyncApiCall(callback) {
  process.nextTick(callback);
}

someAsyncApiCall(() => {
  console.log('bar', bar); // 1
});

bar = 1;

console.log('1'); // 1.压入主线程执行栈，输出1

setTimeout(function () { //2.它的回调函数被加入 宏任务队列中
	//7.目前微任务队列为空，所以取出 宏任务队列首项，执行此任务
    console.log('2'); // 输出2
    process.nextTick(function () { // 16.上一次循环结束，在下一次宏任务开始之前调用，输出3
        console.log('3'); 
    })
    new Promise(function (resolve) {
    	//8.执行 此promise的同步任务，输出4，状态变为resolve
        console.log('4');
        resolve();
    }).then(function () {//9.检测到异步方法then，将其回调函数加入 微任务队列中
        console.log('5'); // 10. 取出微任务队列首项，也就是这个then的回调，执行，输出5
    })
})

process.nextTick(function () { // 11.一次事件循环结束，执行nextTick()的回调，输出6
    console.log('6');
})
new Promise(function (resolve) { 
	//3.执行promise中的同步任务 输出7，状态变为resolve
    console.log('7');
    resolve();
}).then(function () { //4.检测到异步方法then，将其回调函数加入 微任务队列中
    console.log('8'); //6. 主线程执行完毕，取出微任务队列中首项，将其回调函数压入执行栈，输出8
})

setTimeout(function () { //5.它的回调函数 加入 宏任务队列中
	//12.此刻，微任务队列为空，开始执行此宏任务
    console.log('9'); // 输出9
    process.nextTick(function () { // 17.此刻 微任务和宏任务队列都为空了，此次循环自动结束，执行此回调，输出10
        console.log('10');
    })
    new Promise(function (resolve) {
    	//13. 执行此promise的同步任务，输出11，状态改变
        console.log('11');
        resolve();
    }).then(function () {//14.检测到then异步方法，加入微任务队列
        console.log('12');//15.取出微任务队列首项，执行此then微任务，输出12
    })

})

console.log('0');
setTimeout(() => {
    console.log('1');
    new Promise(function(resolve) {
        console.log('2');
        resolve();
    }).then(()=>{
        console.log('3');
    })
    new Promise(resolve => {
        console.log('4');
        for(let i=0;i<9;i++){
            i == 7 && resolve();
        }
        console.log('5');
    }).then(() => {
        console.log('6');
    })
})