<ul id="2koga"></ul>

<fieldset id="2koga"></fieldset>

js 宏任務(wù)和微任務(wù)

zollero 發(fā)布于2019-08-26 13:37 / 1490人閱讀

摘要：想了解什么是宏任務(wù)和微任務(wù)，必須得知道的執(zhí)行順序，是單線程，執(zhí)行時(shí)存在各種任務(wù)隊(duì)列。一些論證討論使用宏任務(wù)和微任務(wù)知識(shí)完成實(shí)現(xiàn)為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)

想了解什么是宏任務(wù)和微任務(wù)，必須得知道JavaScript的執(zhí)行順序，JavaScript是單線程，執(zhí)行時(shí)存在各種任務(wù)隊(duì)列。

常見的宏任務(wù)

業(yè)界流行的認(rèn)為，可能個(gè)別瀏覽器有差異

類型	瀏覽器	Node
I/O	?	?
setTimeout	?	?
setInterval	?	?
setImmediate	?	?
requestAnimationFrame	?	?

常見的微任務(wù)

業(yè)界流行的認(rèn)為，可能個(gè)別瀏覽器有差異

類型	瀏覽器	Node
process.nextTick	?	?
MutationObserver	?	?
Promise.then catch finally	?	?

在當(dāng)前的微任務(wù)沒有執(zhí)行完成時(shí)，是不會(huì)執(zhí)行下一個(gè)宏任務(wù)的 經(jīng)典例子

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

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

console.log(2)

經(jīng)典提問： setTimeout設(shè)置為0的作用

關(guān)鍵就是setTimeout是宏任務(wù)，不管延遲設(shè)置為多少還是會(huì)進(jìn)入任務(wù)隊(duì)列。

一些論證、討論

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

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

使用宏任務(wù)和微任務(wù)知識(shí)完成：promise ES5實(shí)現(xiàn)

function promise(fn) {
    var value = null,
        callbacks = [];  //callbacks為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)

    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");
});