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

相关推荐
一个很帅的帅哥14 分钟前
JavaScript事件循环
开发语言·前端·javascript
驰羽14 分钟前
[GO]gin框架:ShouldBindJSON与其他常见绑定方法
开发语言·golang·gin
程序员大雄学编程21 分钟前
「用Python来学微积分」5. 曲线的极坐标方程
开发语言·python·微积分
云枫晖27 分钟前
Webapck系列-初识Webpack
前端·javascript
jiangzhihao05151 小时前
升级到webpack5
前端·javascript·vue.js
哆啦A梦15881 小时前
36 注册
前端·javascript·html
Jose_lz1 小时前
C#开发学习杂笔(更新中)
开发语言·学习·c#
一位代码1 小时前
python | requests爬虫如何正确获取网页编码?
开发语言·爬虫·python
WujieLi1 小时前
初识 Vite+:一文了解 Rust 驱动的新一代前端工具链
javascript·rust·vite
可触的未来,发芽的智生1 小时前
新奇特:神经网络速比器,小镇债务清零的算法奇缘
javascript·人工智能·python