js微任务宏任务Event-loop

js微任务宏任务Event-loop

js是单线程的语言当我们触发alert之后如果不关闭，后面的console.log是不会执行的。

分为异步任务和同步任务

捕获.JPG

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

执行这个代码发现输出的值是script start, script end, promise1, promise2, setTimeout ，为什么会是这样执行的，setTimeout为什么在最后面。这就是执行的异步任务语句分为宏任务和微任务。

执行的顺序：

• 而宏任务一般是：包括整体代码script，setTimeout，setInterval、setImmediate。

• 微任务：原生Promise、process.nextTick、Object.observe(已废弃)、 MutationObserver 记住就行了。

• Promise在new的时候是同步的，then，catch才是异步

setTimeout细节

setTimeout(() => {
    task()
},3000)

sleep(10000000)

task开始进入eventTable ，task并不会在三秒后执行，三秒后task进入event queue，要等sleep完成再会执行

setInterval细节

setInterval和setTimeout差不多，但是不同的是每隔多少秒就会把任务放入到eventQueue中

2.jpg

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')
    })
})

在new Promise时是同步任务

输出结果是 1，7，6，8，2，4，3，5，9，11，10，12。

总结一下就是先执行同步任务，异步任务放入到event table中，异步任务分为宏任务，微任务，先按顺序执行微任务，将微任务拆分，执行里面的同步任务，异步任务放入到event table中，执行完毕执行宏任务。同理宏任务也是拆解执行同步任务，异步任务一样进入event table。当这个宏任务拆解完，可能会出现微任务。那么还是先执行微任务。