js的执行机制

223 阅读1分钟

js是单线程,但是浏览器可以开辟多线程。

js中先执行同步函数(console,promise),遇到异步执行,则会将异步执行放入队列中等待执行;

setTimeout,setInterval(宏任务)

.then、process.nextTick(微任务)

当主宏任务执行完,查看是否有微任务,执行完当前微任务后,进行下一次宏任务。

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})

process.nextTick(function() {
    console.log('6');
})

new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

结果:1-7-6-8-2-4-3-5-9-11-10-12

实际上await是一个让出线程的标志。await后面的函数会先执行一遍,然后就会跳出整个async函数来执行后面js栈的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await。

async function async1() {
    console.log('async1 start');
    await async2();
    await async3();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
async function async3() {
    console.log('async3');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});
console.log('script end');

script start

async1 start

async2

promise1

script end

async3

promise2

async1 end

setTimeout