js 宏任务和微任务

zollero 发布于2019-08-26 13:37 / 1460人阅读

摘要：想了解什么是宏任务和微任务，必须得知道的执行顺序，是单线程，执行时存在各种任务队列。一些论证讨论使用宏任务和微任务知识完成实现为数组，因为可能同时有很多个回调

想了解什么是宏任务和微任务，必须得知道JavaScript的执行顺序，JavaScript是单线程，执行时存在各种任务队列。

常见的宏任务

业界流行的认为，可能个别浏览器有差异

类型	浏览器	Node
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

常见的微任务

业界流行的认为，可能个别浏览器有差异

类型	浏览器	Node
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise.then catch finally	✅	✅

在当前的微任务没有执行完成时，是不会执行下一个宏任务的 经典例子

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

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

console.log(2)

经典提问： setTimeout设置为0的作用

关键就是setTimeout是宏任务，不管延迟设置为多少还是会进入任务队列。

一些论证、讨论

https://www.cnblogs.com/xieex/archive/2008/07/11/1241137.html

http://www.cnblogs.com/silin6/p/4333999.html

使用宏任务和微任务知识完成：promise ES5实现

function promise(fn) {
    var value = null,
        callbacks = [];  //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 promise(function(resolve) {
        console.log("1");
        resolve();
    })
}

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

GPU云服务器云服务器定时任务与触发任务工作流任务和节点任务任务池任务堆栈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109190.html

js运行机制-事件循环EventLoop

js运行机制-事件循环EventLoop 先来看看一段js代码： console.log(script begin) setTimeout(() => { console.log(setTimeout) },0) new Promise((resolve) => { console.log(promise begin) for(let i = 0; i < 1000; i...

jayce 2019-08-26 13:33 评论0 收藏0
事件循环机制

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。进程浏览器渲染进程浏览器内核，主要负责页面的渲染执行以及事件的循环。第二轮循环结束。将自己读到的比较好的文章分享出来，大家互相学习，各位大佬有好的文章也可以留个链接互相学习，万分感谢！线程与进程关于线程与进程的关系可以用下面的图进行说明： showImg(https://segmentfault.com/img/bVbjSZt?...

Blackjun 2019-08-29 17:21 评论0 收藏0
事件循环机制

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。进程浏览器渲染进程浏览器内核，主要负责页面的渲染执行以及事件的循环。第二轮循环结束。将自己读到的比较好的文章分享出来，大家互相学习，各位大佬有好的文章也可以留个链接互相学习，万分感谢！线程与进程关于线程与进程的关系可以用下面的图进行说明： showImg(https://segmentfault.com/img/bVbjSZt?...

CloudwiseAPM 2019-08-26 13:25 评论0 收藏0
js的setTimeout和Promise---同步异步和微任务宏任务

摘要：为了最终确认，进行最后一次验证，在第一个里面多加一层同步新加行新加行新加行新加行新加行新加行同步输出结果如下同步同步确认完毕，的确是一层一层的执行。而是微任务，是宏任务。久经前端开发沙场，会经历各式各样的需求，处理这些需求时候，会使用各种各样的api和功能，这里集中对setTimeout和Promise的异步功能进行讨论一下。单独使用的执行模式这里就使用Promise作为例子，...

stdying 2019-08-26 13:28 评论0 收藏0