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

相关推荐
洛小豆28 分钟前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator32 分钟前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆38 分钟前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
witton38 分钟前
Go语言网络游戏服务器模块化编程
服务器·开发语言·游戏·golang·origin·模块化·耦合
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript
bug爱好者1 小时前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina1 小时前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试
枯萎穿心攻击1 小时前
ECS由浅入深第三节:进阶?System 的行为与复杂交互模式
开发语言·unity·c#·游戏引擎
code_YuJun1 小时前
从内存角度理解JS代码执行过程
javascript
Jerry Lau1 小时前
go go go 出发咯 - go web开发入门系列(一) helloworld
开发语言·前端·golang