js 宏任务和微任务

1.概念:宏任务(macrotask )和微任务(microtask ) 表示异步任务的两种分类。常见宏任务:I/O 、setTimeout、setInterval;微任务:Promise.then catch finally、process.nextTick

在挂起任务时,JS 引擎会将 所有任务 按照类别分到这两个队列中,

首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;

之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。

2.代码

2.1 基本执行顺序

// 主线程(外层宏) -  微  -  宏
//  1  1.1  -  2  -  3
setTimeout(() => {
    console.log(‘3‘)
}, 0)
console.log(‘1‘);

new Promise((resolve) => {
    console.log(‘1.1‘);
    resolve()
}).then(() => {
    console.log(‘2‘);
}).then(()=>{
    console.log(‘2.1‘)
})

setTimeout(_ => console.log(4))

new Promise(resolve => {
  resolve()
  console.log(1)
}).then(_ => {
  console.log(3)
})

console.log(2)

2.2 深度解析案例 :单组依次执行

console.log(‘1‘);
setTimeout(function() {
    console.log(‘3‘);
    new Promise(function(resolve) {
        console.log(‘3.1‘);
        resolve();
    }).then(function() {
        console.log(‘4‘)
    })
})

new Promise(function(resolve) {
    console.log(‘1.1‘);
    resolve();
}).then(function() {
    console.log(‘2‘)
})

setTimeout(function() {
    console.log(‘5‘);
    new Promise(function(resolve) {
        console.log(‘5.1‘);
        resolve();
    }).then(function() {
        console.log(‘6‘)
    })
})

2.3 promise ES5实现

function MyPromise(fn) {
    var value = null,
        callbacks = [];
    this.then = function (onFulfilled) {
        callbacks.push(onFulfilled);
        return this;
    };
    function resolve(value) {
        setTimeout(function () {
            callbacks.forEach(function (callback) {
                callback(value);
            });
        },0)
    }
    fn(resolve);
}

function test() {
    return new MyPromise(function(resolve) {
        console.log(‘1‘);
        resolve();
    })
}

test().then(function(resolve) {
    console.log(‘2‘);
}).then(function(resolve) {
    console.log(‘3‘);
});

3.相关文章

js 宏任务和微任务介绍及实例讲解

js 宏任务和微任务

彻底理解setTimeout()

原文地址:https://www.cnblogs.com/justSmile2/p/11185045.html

时间: 2024-10-11 17:46:18

js 宏任务和微任务的相关文章

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读取对应的函数,推

常见宏任务与微任务

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

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 .... 结果是,微

宏任务与微任务

老规矩,先放两道题目,先看看会有什么结果输出,然后我们一起研究为什么 async function async1(){ console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2(){ console.log("async2"); } console.log("script start"); se

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

最近突然被问到关于正常任务(宏任务)和微任务的问题,学习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 是单线程.异步.非阻塞.解