【JS笔试题】模拟一个微任务

前言

这是一道腾讯面试题，要求如下，如果不了解微任务，可以看我另一篇文章结合Chrome文档详解事件循环。

/*** 异步执行一个函数* 如果可以，尽量将函数放入到微队列中* @param {Function} func 无参无返回 */
function asyncRun(func) {}

实现

初步想法是变为Promise即可

function asyncRun(func) {Promise.resolve().then(func)
}

但有不妥，仔细观察题目中的「如果可以」了解到可能有的浏览器并不支持Promise，继续优化。

function asyncRun(func) {if (typeof setImmediate === "function") {Promise.resolve().then(func)}
}

继续分析，vue中的nextTick也实现了将函数放入微队列。查看vue源码发现，vue的处理为如果支持Promise则使用，否则使用MutationObserver。

MutationObserver是什么？根据mdn文档说明可知，MutationObserver用于监听dom节点的变化。

使用方法如下

const ob = new MutationObserver(()=>{console.log('change')})
ob.observe(domNode,{ characterData: true })

继续优化代码，手动触发dom变化，那么func就会被加入微队列。

function asyncRun(func) {if (typeof setImmediate === "function") {Promise.resolve().then(func)} else if(typeof MutationObserver !== 'undefined'){const ob = new MutationObserver(fnc)const textNode = document.createTextNode('0')ob.observe(textNode,{ characterData: true })textNode.data = '1' }
}

通过w3c文档可知，MutationObserver确实会放入微队列。