据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
一个简单的承诺版本，Function#callAsWorker，它接受一个thisArg和参数(就像call一样)，并返回一个承诺:
Function.prototype.callAsWorker = function (...args) { return new Promise( (resolve, reject) => { const code = `self.onmessage = e => self.postMessage((${this.toString()}).call(...e.data));`, blob = new Blob([code], { type: "text/javascript" }), worker = new Worker(window.URL.createObjectURL(blob)); worker.onmessage = e => (resolve(e.data), worker.terminate()); worker.onerror = e => (reject(e.message), worker.terminate()); worker.postMessage(args); }); } // Demo function add(...nums) { return nums.reduce( (a,b) => a+b ); } // Let the worker execute the above function, with the specified arguments add.callAsWorker(null, 1, 2, 3).then(function (result) { console.log('result: ', result); });
其他回答
我喜欢ifbamoq给出的答案，但由于堆栈溢出的积分政策，我无法评论。因此，我将给出一个示例，展示一些正在进行的密集工作——以及它如何不锁定主线程。
如果你像我一样双击html文件，把它们当成小程序，就不会遇到空原点的CORS问题。: -)
<!DOCTYPE html> <html> <head> <title>Worker example: One-core computation</title> </head> <body> <p>The highest prime number discovered so far is: <div id="result"></div></p> </body> <script> // let worker = new Worker('WebWorker.js'); // lets skip this to avoid null origin issues let WorkerFn = (event) => { let isPrime = false; for (let n = 2; n <= 1_000_000; n++) { isPrime = true; for(let i = 2; i <= Math.sqrt(n); i++) if (n % i == 0) isPrime = false; // If you can get thru all this shit and survive, ur prime! if (isPrime) postMessage(n); } } let worker = new Worker(window.URL.createObjectURL(new Blob(["(" + WorkerFn.toString() + ")()"], {type: "text/javascript"}))); worker.onmessage = (event) => { result.innerHTML = event.data; } </script> </html>
这是一个有点离题的答案，但是……您可能不需要使用网络工作者来处理浏览器上的长时间工作。
让我们假设你想要运行几次繁重的计算(就像你对数组做的那样):
const heavyFct = () => {let i = 0; while(i<1e8) {++i}}
for (let i = 0; i < 100; ++i) {
heavyFct();
}
这将冻结您的浏览器。
为了避免这种情况，我们可以这样依赖setTimeout:
const desync = (i = 0) => {
if (i >= 100) {return}
heavyFct();
setTimeout(() => desync(i + 1), 0);
}
desync();
现在，您可以在不冻结计算机的情况下运行繁重的计算
另一个解决方案是将Worker包装在一个函数中，然后创建一个调用函数的blob，如下所示:
function workerCode() {
self.onmessage = function (e) {
console.log("Got message from parent", e.data);
};
setTimeout(() => {
self.postMessage("Message From Worker");
}, 2000);
}
let blob = new Blob([
"(" + workerCode.toString() + ")()"
], {type: "text/javascript"});
// Note: window.webkitURL.createObjectURL() in Chrome 10+.
let worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function (e) {
console.log("Received: " + e.data);
};
worker.postMessage("hello"); // Start the worker.
这只是上面的一个补充-我在jsFiddle中有一个很好的模板用于测试web worker。而不是Blob，它使用jsFiddles ?js api:
function workerFN() {
self.onmessage = function(e) {
switch(e.data.name) {
case "" :
break;
default:
console.error("Unknown message:", e.data.name);
}
}
}
// This is a trick to generate real worker script that is loaded from server
var url = "/echo/js/?js="+encodeURIComponent("("+workerFN.toString()+")()");
var worker = new Worker(url);
worker.addEventListener("message", function(e) {
switch(e.data.name) {
case "" :
break;
default:
console.error("Unknown message:", e.data.name);
}
})
有普通的web worker模板和共享worker模板。
近期答案(2018)
你可以使用Greenlet:
移动一个异步函数到它自己的线程中。Workerize的简化单功能版本。
例子:
import greenlet from 'greenlet'
const getName = greenlet(async username => {
const url = `https://api.github.com/users/${username}`
const res = await fetch(url)
const profile = await res.json()
return profile.name
})
console.log(await getName('developit'))
