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

相关推荐
小许学java11 分钟前
Spring AI快速入门以及项目的创建
java·开发语言·人工智能·后端·spring·ai编程·spring ai
右子23 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
AGG_Chan23 分钟前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
冰镇生鲜24 分钟前
前端模拟 流式文本接口 打字机效果 mockStreamText
javascript
入秋36 分钟前
Three.js后期处理实战:噪点 景深 以及色彩调整
前端·javascript·three.js
Asort40 分钟前
JavaScript设计模式(七)——桥接模式:解耦抽象与实现的优雅之道
前端·javascript·设计模式
Darenm1111 小时前
JavaScript事件流:冒泡与捕获的深度解析
开发语言·前端·javascript
渣哥1 小时前
不加 @Primary?Spring 自动装配时可能直接报错!
javascript·后端·面试
whltaoin1 小时前
Java 后端与 AI 融合:技术路径、实战案例与未来趋势
java·开发语言·人工智能·编程思想·ai生态
@大迁世界1 小时前
第03章: Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript