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

田本初2024-09-05 18:06

前言

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

javascript 复制代码

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

实现

初步想法是变为Promise即可

javascript 复制代码

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

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

javascript 复制代码

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

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

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

使用方法如下

javascript 复制代码

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

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

javascript 复制代码

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确实会放入微队列。