web worker不能传递函数,怎么办?动态函数

需求

最近遇到一个需求,需要把用户自定义的函数(不用考虑执行函数的安全性)丢到worker中执行,但是postMessage时不能传递函数,所以要解决这个问题。

办法

解决办法:1、在postMessage时传递foo函数体字符串。2、在子线程接收后用new Function动态函数还原foo函数。

代码如下:

主线程:调用toString()拿到函数体的字符串,然后postMessage传递给子线程。

javascript 复制代码
function foo(a,b){
   console.log(a,b)
}
// 将函数转换为字符串
const fooString = foo.toString();

// 创建 Worker
const worker = new Worker('worker.js');

// 发送函数字符串和参数到 Worker
worker.postMessage({
  functionString: fooString
});

worker线程:拿到函数体字符串后通过new Function还原函数。

javascript 复制代码
self.onmessage = function(e) {
  const { functionString} = e.data;
  
  // 重新创建函数
  const foo = new Function(`return ${functionString}`)();
  
  // 在worker线程中执行函数
  foo.apply(null, [1,2]);
};

后续就可以直接调用这个函数了。

END

相关推荐
军军君0131 分钟前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
青岑CTF1 小时前
攻防世界-Ics-05-胎教版wp
开发语言·安全·web安全·网络安全·php
Li emily1 小时前
如何通过外汇API平台快速实现实时数据接入?
开发语言·python·api·fastapi·美股
xiaoqi9221 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
APIshop1 小时前
Java 实战:调用 item_search_tmall 按关键词搜索天猫商品
java·开发语言·数据库
打小就很皮...2 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
血小板要健康2 小时前
Java基础常见面试题复习合集1
java·开发语言·经验分享·笔记·面试·学习方法
qq_177767372 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
淼淼7632 小时前
安装jdk1.8
java·开发语言
2603_949462102 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter