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

前言

这是一道腾讯面试题,要求如下,如果不了解微任务,可以看我另一篇文章结合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确实会放入微队列。

相关推荐
江城开朗的豌豆40 分钟前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
江城开朗的豌豆1 小时前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing1 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
遂心_15 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_15 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy16 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy16 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子17 小时前
迭代器和生成器
前端·javascript
源猿人20 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin20 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js