宏任务与微任务

老规矩,先放两道题目,先看看会有什么结果输出,然后我们一起研究为什么

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(){
    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
async1 end
 promise2
undefined
setTimeout/*
new Promise(function(resolve){
   console.log('2');
}).then(function(){
   console.log('3')
});

console.log('4');

//2
//4
new Promise(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});

console.log('4');

//2
//4
//3
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(){
    console.log("setTimeout");
},0)
/*async1();
script start
async1 start
async2
async1 end
Promise?{<resolved>: undefined}
setTimeout*/

未完,待续...

原文地址:https://www.cnblogs.com/smart-girl/p/10493850.html

时间: 2024-10-12 08:40:11

宏任务与微任务的相关文章

js 宏任务,微任务

在了解async之后,发现一个自己不是很熟悉的点儿,在这儿记录一下 js 中存在宏任务和微任务,js 的执行顺序是 一个宏任务执行结束之后才会去执行下一个宏任务,微任务是在本宏任务的主要的任务结束之后,再去执行微任务,当所有的微任务结束之后,这个宏任务也就算执行结束了,值的注意的是,script 就是一个大的宏任务   先分类:       宏任务  srcipt > setImmediate  > messageChannel > setTimeout/setInterval     

js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环中的同步任务,异步任务: 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数. 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推

js 宏任务和微任务

1.概念:宏任务(macrotask )和微任务(microtask ) 表示异步任务的两种分类.常见宏任务:I/O .setTimeout.setInterval:微任务:Promise.then catch finally.process.nextTick 在挂起任务时,JS 引擎会将 所有任务 按照类别分到这两个队列中, 首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行: 之后再取 m

12. 宏任务_微任务

执行过程: 每当执行栈为空时,就检查微任务,有则进栈执行,栈空了再去查微任务, 直到没有微任务时,去宏任务中取一个进栈执行,栈空了又开始检查微任务,循环往复,直至全都为空 宏任务: I/O (click事件.fs.writeFile) setTimeout setInterval setImmediate (nodejs) requestAnimationFrame 微任务 process.nextTick (nodejs) Promise.then().catch() console.log(

宏任务和微任务

javasript宿主环境有事件循环,异步任务会被加入到任务队列,任务队列分为两种,宏任务(macroTask)和微任务(microTask). 宏任务队列会有多个,微任务队列只有一个. 每次事件循环,先执行微任务队列,执行完后,会选择一个宏任务队列执行,然后再次执行微任务队列,完成后再挑一个宏任务队列执行.. 总之,就是 microTask queue -> macroTask queue -> microTask queue -> macroTask queue .... 结果是,微

常见宏任务与微任务

宏任务(macrotasks): 主js.UI渲染.setTimeout.setInterval.setImmediately.requestAnimationFrame.I/O等 微任务(microtasks):process.nextTick().promise.Object.observe()等 原文地址:https://www.cnblogs.com/yanze/p/11820302.html

正常任务(宏任务)和微任务

最近突然被问到关于正常任务(宏任务)和微任务的问题,学习js这么长时间来,还没有注意到js的任务还有宏任务和微任务的区别,在网上查找以后大概知道了什么是宏任务和微任务. 首先,宏任务包含:setTimeout/setInterval/setImmediate/整体代码script 而微任务包含:promise和process.nextTick 从结果来说,两者的区别在于在事件循环机制中,执行的机制不同,具体执行顺序是这样: 每次执行栈的同步任务执行完毕,就会去任务队列中取出完成的异步任务,队列中

$nextTick 宏任务 微任务 macrotasks microtasks

1.nextTick调用方法 首先看nextTick的调用方法: https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示) Vue.nextTick() .then(function () { // DOM 更新了 }) 即:既可以支持

总结:JavaScript异步、事件循环与消息队列、微任务与宏任务

本人正在努力学习前端,内容仅供参考.由于各种原因(不喜欢博客园的UI),大家可以移步我的github阅读体验更佳:传送门,喜欢就点个star咯,或者我的博客:https://blog.tangzhengwei.me 掘金:传送门,segmentfault:传送门 前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: "JavaScript 是单线程.异步.非阻塞.解