将复杂任务放入第二个进程,避免卡住主进程(页面)(使用WebWorker)
快速将复杂操作放入Web Worker中执行(避免卡住网页),无需另外的js文件。
传入要运行的函数(可以是async函数)和给与的参数即可。
注意函数运行在独立环境,变量要通过参数传递,且只能传递可序列化数据。
使用示例:
let result = await runInWorker((a, b)=>{
return a+b;
}, 1, 2);
result; // 3
代码:
function runInWorker(f, ...args) {
return new Promise((resolve, reject) => {
let js = `
(function(f){
self.onmessage = ({data})=>{
if(data.type=="run-with-args"){
(async ()=>{
try{
let r = await f(...data.args);
self.postMessage({
type: "result",
result: r
});
}catch(e){
self.postMessage({
type: "error",
error: e
});
}
})();
}
}
})(${f.toString()});
`;
let worker = new Worker(URL.createObjectURL(new Blob([js], {
type: 'text/plain'
})));
worker.onmessage = ({ data }) => {
if (data.type == "result") {
resolve(data.result);
worker.terminate(); // terminate 之后不方便调试
}
else if (data.type == "error") {
reject(data.error);
worker.terminate();
}
}
worker.postMessage({
type: "run-with-args",
args
});
}
);
}