如何将函数(的副本)从我的主线程发送到我的工作线程?
每当我尝试:
worker.postMessage({data, func: (data) => data)
时,Firefox 都会给我一条错误消息:DataCloneError:无法克隆该对象。
对于 Chrome,消息有所不同,但错误仍然发生: Uncaught DOMException: Failed toexecute 'postMessage' on 'Worker': An object Could not be cloned.
是的,这是可能的,我做到了,而且比这更好的是,我可以创建没有 js 文件的 Web Worker,只需使用 javascript 代码生成的 Blob 文件。
setInterval(()=>{console.log("non bloked " + Math.random())}, 900)
console.log("starting blocking code in Worker")
console.time("blocked")
genericWorker(window, ["blockCpu", function (block){
block(10000) //This blockCpu function is defined below
return `\n\nbla ${123123*2312} bla \n` //This is catched in the resolved promise
}]).then(function (result){
console.timeEnd("blocked")
console.log("End of blocking code", result)
})
.catch(function(error) { console.log(error) })
/* A Web Worker that does not use a File, it create that from a Blob
@cb_context, The context where the callback functions arguments are, ex: window
@cb, ["fn_name1", "fn_name2", function (fn1, fn2) {}]
The callback will be executed, and you can pass other functions to that cb
*/
function genericWorker(cb_context, cb) {
return new Promise(function (resolve, reject) {
if (!cb || !Array.isArray(cb))
return reject("Invalid data")
var callback = cb.pop()
var functions = cb
if (typeof callback != "function" || functions.some((fn)=>{return typeof cb_context[fn] != "function"}))
return reject(`The callback or some of the parameters: (${functions.toString()}) are not functions`)
if (functions.length>0 && !cb_context)
return reject("context is undefined")
callback = fn_string(callback) //Callback to be executed
functions = functions.map((fn_name)=> { return fn_string( cb_context[fn_name] ) })
var worker_file = window.URL.createObjectURL( new Blob(["self.addEventListener('message', function(e) { var bb = {}; var args = []; for (fn of e.data.functions) { bb[fn.name] = new Function(fn.args, fn.body); args.push(fn.name)}; var callback = new Function( e.data.callback.args, e.data.callback.body); args = args.map(function(fn_name) { return bb[fn_name] }); var result = callback.apply(null, args) ;self.postMessage( result );}, false)"]) )
var worker = new Worker(worker_file)
worker.postMessage({ callback: callback, functions: functions })
worker.addEventListener('error', function(error){ return reject(error.message) })
worker.addEventListener('message', function(e) {
resolve(e.data), worker.terminate()
}, false)
//From function to string, with its name, arguments and its body
function fn_string (fn) {
var name = fn.name, fn = fn.toString()
return { name: name,
args: fn.substring(fn.indexOf("(") + 1, fn.indexOf(")")),
body: fn.substring(fn.indexOf("{") + 1, fn.lastIndexOf("}"))
}
}
})
}
//random blocking function
function blockCpu(ms) {
var now = new Date().getTime();
var result = 0
while(true) {
result += Math.random() * Math.random();
if (new Date().getTime() > now +ms)
return;
}
}
尚未对此进行测试,但从规范看来,只有可以发送给 Worker 的对象才是“可转移”对象: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Transferable_objects
我找到了一些例子,第一个例子中的过程没有详细说明,但我猜他使用了一种类型或URL编码,对于一个对象,它可以像第二个例子一样转换为JSON。
如何将函数传递给 JavaScript Web Worker
我也必须在几天内完成此操作,我可以随时更新我所拥有的将要测试的内容..