本文主要是介绍【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确实会放入微队列。
这篇关于【JS笔试题】模拟一个微任务的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!