为什么我的发射只在一个方向上工作？答案

【问题标题】：Why does my emit work in only one direction?为什么我的发射只在一个方向上工作？
【发布时间】：2020-08-01 23:31:38
【问题描述】：

我通过 CDN 脚本标签使用 EventEmitter。我试图在 HTML 脚本标签中包含的外部脚本和本地脚本之间发出。从外部脚本发射工作正常。但是从 HTML 文档的 script 标签中不会发出。

我错过了什么？

HTML 文档：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.8/EventEmitter.min.js"></script>
    <script src="emitter.js"></script>
  </head>
  <body></body>
  <script>
      e.on("fromJSFile", function(msg){
          console.log("Received message from external script: " + msg)
      })
      e.emit("fromHTMLScript", "Emitted from HTML script")
  </script>
</html>

外部脚本（emitter.js）：

let e = new EventEmitter()

e.emit("fromJSFile", "Emitted from external script")
e.on("fromHTMLScript", function(msg){
    console.log("Recieved message from HTML script: " + msg)
})

【问题讨论】：

在添加所有处理程序之前，您不应尝试emit。虽然我认为发出事件应该发生在当前调用堆栈之外，但我不确定他们是如何在浏览器中实现 setImmediate() （等）的。可能存在一些实现怪癖。

标签： javascript eventemitter

【解决方案1】：

它确实适用于两种方式，但您需要等待侦听器设置好后再发出。

浏览器会在解析完 JavaScript 后立即执行，所以会执行的是这个（按时间顺序）：

let e = new EventEmitter()

e.emit("fromJSFile", "Emitted from external script") // An event will be emitted on "fromJSFile", but there are no listeners at the execution time
e.on("fromHTMLScript", function(msg){
  console.log("Recieved message from HTML script: " + msg)
}) // Adding a listener on "fromHTMLScript"


e.on("fromJSFile", function(msg){
  console.log("Received message from external script: " + msg)
}) // Adding a listener on "fromJSFile"
e.emit("fromHTMLScript", "Emitted from HTML script") // An event is emitted on "fromHTMLScript" and caught by the listener

您需要做的是尽快设置监听器（您甚至可以在页面完全加载之前进行设置），然后然后在页面完全加载时发出。

例如，你可以在你的 JS 文件中这样写：

let e = new EventEmitter()

e.on("fromHTMLScript", (msg) => {
  console.log("Recieved message from HTML script: " + msg)
}) // Register listener on "fromHTMLScript"

document.addEventListener("DOMContentLoaded", () => {
  e.emit("fromJSFile", "Emitted from external script")
}); // Emit on "fromJSFile" when the page fully loaded

这在你的脚本标签中：

e.on("fromJSFile", function(msg){
  console.log("Received message from external script: " + msg)
}) // Register listener on "fromJSFile"

document.addEventListener("DOMContentLoaded", () => {
  e.emit("fromHTMLScript", "Emitted from HTML script")
}); // Emit on "fromHTMLScript" when the page fully loaded

【讨论】：

您介意展示一个示例，说明如何使用 HTML 脚本标记代码和外部脚本来完成您的建议吗？我的用例要求它以这种方式工作。
@Dshiz 抱歉编辑晚了，我添加了一个工作代码。
有趣..我实际上已经在尝试使用此事件侦听器，但与您实现它的方式不同。非常感激！还值得注意的是，我能够通过将包含 HTML 端代码的 script 标记添加到 <body> 元素来解决此问题，并且它也以这种方式成功工作。