在Web Workers上创建自定义事件

Question

我做了一个webworker，并尝试添加一个称为progress的自定义事件，如下所示：

self.updateProgress = function(no){
    let event = new CustomEvent(
        'progress',
        {
            detail : {
                description: "event from webworker to update progress",
                timeofevent: new Date(),
                eventcode: 15
            },
            bubbles: true,
            cancelable: false,
            data : no
        });
        self.console.log(self.dispatchEvent(event));
    };

在父级JavaScript中：

scope.worker.addEventListener('progress', (e) => { //cannot add custom events to worker yet
    scope.progress = e.data;
});

问题在于事件从未触发，根据我所读的，似乎只有消息和错误事件与worker对象相关联。是否不可能添加自定义事件？

- Phillip Ochola

---

你的代码块有问题，请编辑你的问题并进行修正。 - Simon Bosley

已经修复了，请告诉我是否有做错的地方。原始代码很干净。 - Phillip Ochola

现在没问题了，我还添加了JavaScript标签，这样你也可以获得语法高亮。 - Simon Bosley

谢谢。我还在摸索中。 - Phillip Ochola

Answer 1

您在主线程中设置了worker.addEventListener('message', (e) => {})，但您没有在工作者中使用self.dispatchEvent。相反，您调用self.postMessage(obj, []);并且工作程序实现完成该工作（在线程之间传递数据和触发事件）。

在Chrome中，WebWorker的原型是EventTarget，因此您可能可以在创建它时将其用作事件目标。但是，在主线程中的worker和工作者中的self不是同一个对象/作用域，因此您在不同的目标上分派事件并监听事件。

但是，没有什么阻止您使用标准的self.postMessage方式来跟踪加载进度。

- Ramil Kudashev

---

谢谢您的回复。不过，我想看看是否可以添加自己的自定义事件来在工作线程和UI线程之间进行通信。postMessage会触发UI线程中的消息事件处理程序，但是我想从工作线程触发一个单独的事件处理程序，而不必经过postMessage路线。就我所知，工作者上的事件处理程序是固定的。 - Phillip Ochola