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

相关推荐
前端开发爱好者3 分钟前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者4 分钟前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
脚踏实地的大梦想家23 分钟前
【Go】P2 Golang 常量与变量
开发语言·后端·golang
张璐月23 分钟前
go docker-compose启动前后端分离项目 踩坑之旅
开发语言·docker·golang
BillKu26 分钟前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_4233919329 分钟前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_4233919329 分钟前
React Hooks 钩子
前端·javascript·react.js
CUGGZ30 分钟前
第三代 React,怎么玩?
前端·javascript·react.js
小爱同学_1 小时前
从前端模块化历史到大厂面试题
前端·javascript·面试
雪中何以赠君别1 小时前
AMD、CMD 和 ES6 Module 的区别与演进
前端·javascript