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

相关推荐
Victory_20253 分钟前
c#定时器顺序控制写法
开发语言·c#·c#顺序控制+定时器
时光足迹15 分钟前
Tiptap 简单编辑器模版
前端·javascript·react.js
Cyber4K19 分钟前
【Python专项】Nginx访问日志分析时间范围处理示例
开发语言·python·nginx
吴声子夜歌26 分钟前
Vue3——使用Mock.js
javascript·vue·mock.js
JSLove28 分钟前
nginx入门
前端·nginx
中犇科技28 分钟前
郑州无代码APP开发公司哪家好呢?推荐
开发语言
时光足迹29 分钟前
ThreeJS之GUI控制器
前端·javascript·three.js
时光足迹30 分钟前
Tiptap编辑器
前端·javascript·react.js
im_AMBER32 分钟前
手撕hot100之矩阵!看完这篇就AC~
javascript·数据结构·线性代数·算法·leetcode·矩阵