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

相关推荐
老前端的功夫36 分钟前
前端Echarts性能优化:从卡顿到流畅的百万级数据可视化
前端·javascript
进击的野人38 分钟前
深入解析localStorage:前端数据持久化的核心技术
前端·javascript
今晚打老虎38 分钟前
c++(斗罗大陆3)
开发语言·c++·斗罗大陆3
懵圈42 分钟前
第2章:项目启动 - 使用Vite脚手架初始化项目与工程化配置
前端
Mh43 分钟前
如何优雅的消除“if...else...”
前端·javascript
mywpython1 小时前
Python使用消息队列rabbitmq
开发语言·python·rabbitmq
火鸟21 小时前
给予虚拟成像台尝鲜版十之二,完善支持 HTML 原型模式
前端·html·原型模式·通用代码生成器·给予虚拟成像台·快速原型·rust语言
hygge9991 小时前
JVM GC 垃圾回收体系完整讲解
java·开发语言·jvm·经验分享·面试
wuwu_q1 小时前
通俗易懂 + Android 开发实战的方式,详细讲讲 Kotlin 中的 StateFlow
android·开发语言·kotlin
峰哥的Android进阶之路1 小时前
Kotlin面试题总结
android·开发语言·kotlin