从 webworker 发送消息并等待回复

Question

我目前是第一次与 webworker 和 canvas 合作，对此有疑问。

我有一个网页需要在canvas上绘制多个元素。当canvas已满时我想创建一个新的canvas并继续绘制。 我已经将绘制逻辑外包给了一个获取元素列表和当前 canvas (OffscreenCanvas) 的网络工作者。 我想使用 promise 向 webworker 的前端发送消息以创建新的 canvas 并将其作为响应取回。 有没有一个优雅的解决方案？ 我的思路似乎遇到了障碍。

Answer 1

我想我找到了解决方案：

const WEBWORKER_INSTANCE = self; // DedicatedWorkerGlobalScope
const PROMISE_TIMEOUT = 1000;

function addNewPageCallback(pageCount: number): Promise<OffscreenCanvas> {
  return new Promise<OffscreenCanvas>((resolve, reject) => {
    let timeoutId = null;
    const id = `page#${pageCount + 1}`;

    WEBWORKER_INSTANCE.addEventListener('message', (event: MessageEvent<DrawCanvasEvent>) => {
      if (event.data.action === 'page-added') {
        const data = event.data as DrawCanvasAddPageResponseEvent;
        if (data.id === id) {
          clearTimeout(timeoutId);
          resolve(data.canvas);
        }
      }
    });

    const message: DrawCanvasAddPageRequestEvent = {
      action: 'add-page',
      id
    };
    postMessage(message);

    timeoutId = setTimeout(reject, PROMISE_TIMEOUT);
  });
}