javascript - 潜在的 jQuery 侦听器竞争条件 - 也许与 Chrome 开发工具相关

Question

系好安全带，这可能比预期的要长……

注意：所有侦听器都委托给“body”，所有触发的事件也都在“body”上。

预期的页面加载流程

1. 创建 ID 为 #selectorA 的选择器
2. 为触发 ("aChanged") 的 #selectA 值更改 (listener1) 注册侦听器
3. 如果条件 X，则为重新加载父页面的 aChanged 注册侦听器 (listener2)
4. 为 aChanged 注册监听器，将 CSS 更改应用于 #selectorA (listener3)

预期的变更流程

1. 用户更新 #selectA 值 -> $.trigger("aChanged")
2. listener1 听到 aChanged -> If 条件，然后重新加载整个页面
3. listener2 在页面上听到 aChanged -> $.load() 一个 div
4. listener3 听到 aChanged -> 更新一些 #selectA 元素的 css 类（不是元素，只是它们的 css）

我的意图是，如果 on-change-flow 步骤 2 重新加载整个页面，其他侦听器可以做他们想做的任何事情 - 或者失败，我不在乎，因为页面正在重新加载。我的假设是，如果页面正在重新加载，其他监听器不能影响现在加载/新加载页面的 div/CSS。

我的问题

有时，但很少不一致，当在满足条件 X（重新加载页面条件）的两个或多个选项之间切换 #selectA 时，侦听器停止侦听 - 或 aChanged 事件未触发。

当登录到控制台时，我注意到任何时候监听器即将失败（当他们在没有听到任何东西之前注册时） loadPage - registerAllListeners 的顺序发生了变化，而不是来自索引页面的控制台日志，他们来了来自 VMxyz 标识符（chrome 的开发工具“此脚本与 URL 无关”标识符）。如果它即将失败，大多数“注册侦听器”控制台日志都出现在 chrome 的“导航到 https://...”日志之前 - 所有这些日志都来自 VMxyz 标识符。

我的问题

1. 我有点理解 chrome 的开发工具 VMxyz 标识符，但我可以帮助理解为什么 - 有时 - 这些 console.log() 语句来自实际页面以及为什么它们有时来自 VMxyz。
2. 我无法理解为什么听众有时会停止工作。在我看来，即使页面确实重新加载了中间侦听器操作，该页面也只会创建新的侦听器。
3. 如果有人对我如何进一步调试或完全修复它有建议（请），我将不胜感激。

标签： javascriptjquerygoogle-chrome-devtoolsrace-condition