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

相关推荐
kimnoic3 小时前
Python数据库学习心得:SQLite、MySQL、PostgreSQL优缺点
开发语言·python
架构技术专栏3 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海4 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
必须得开心呀4 小时前
python编写带界面的软件,需要安装哪些插件
开发语言·python
志尊宝5 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
刘发财5 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
A接拉起0076 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
_馒头6 小时前
pixiJs游戏开发实践 - 跳棋小游戏
javascript·vue.js
用户11481867894846 小时前
面试官:大屏项目里十几个模块同时渲染上万条数据,怎么做到不卡?
前端·性能优化
前端市界6 小时前
Pro React Admin: 统一工程底座,承载多种应用...
前端·github