2019-12-05
描述
使用 Web Worker 在单独的线程中运行一个函数,在不阻塞 UI 的情况在允许长时间运行该函数。
提示
- 使用
Blob
对象 URL 创建一个Worker
,内容应为所提供函数的字符串版本 - 在回调函数执行完毕后,需马上将其返回值进行传递
- 返回一个
Promise
,用来监听 worker 的onmessage
和onerror
事件。将 worker 中返回的数据做为Promise
成功的参数,将错误信息做为Promise
失败的参数
代码
const runAsync = fn => { const worker = new Worker( URL.createObjectURL(new Blob([`postMessage((${fn})());`]), { type: 'application/javascript; charset=utf-8' }) ); return new Promise((res, rej) => { worker.onmessage = ({ data }) => { res(data), worker.terminate(); }; worker.onerror = err => { rej(err), worker.terminate(); }; }); };
示例
在单独的线程中运行函数:
const longRunningFunction = () => { let result = 0; for (let i = 0; i < 1000; i++) for (let j = 0; j < 700; j++) for (let k = 0; k < 300; k++) result = result + i + j + k; return result; }; /* 注意:由于函数运行在不同的上下文中,因此不支持闭包。 提供给 `runAsync` 的函数将被转换为字符串,因此一切都变成来字符。 所有函数和变量都必须定义在内部。 */ runAsync(longRunningFunction).then(console.log); // 209685000000 runAsync(() => 10 ** 3).then(console.log); // 1000 let outsideVariable = 50; runAsync(() => typeof outsideVariable).then(console.log); // 'undefined'
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于