问题
Buckle in, this may be a longer ride than expected...
Note: all listeners are delegated to the 'body' and all triggered events are on the 'body' as well.
Intended On-Page-Load Flow
- Create selector with id #selectorA
- Register listener for #selectA value changed (listener1) that triggers ("aChanged")
- If condition X, register listener for aChanged that reloads the parent page (listener2)
- Register listener for aChanged that applies CSS changes to #selectorA (listener3)
Intended On-Change Flow
- User updates #selectA value -> $.trigger("aChanged")
- listener1 hears aChanged -> If condition, then reload whole page
- listener2 hears aChanged -> $.load() a div on page
- listener3 hears aChanged -> update some #selectA element's css classes (not the elements, just their css)
My intent is that if on-change-flow step 2 reloads the whole page, the other listeners can do whatever they want - or fail, I don't care because the page is being reloaded anyway. My assumption is that if the page is reloading, the other listeners can't affect the div/CSS of the now-loading/newly-loaded page.
My problem
Sometimes, but inconsistently seldom, when switching #selectA between two or more options that satisfy condition X (reload page condition), the listeners stop listening - or the aChanged event isn't fired.
When logging to the console I noticed that any time the listeners are about to fail (when they are registered prior to not hearing anything) that the order of loadPage - registerAllListeners changes, and instead of the console logs coming from the index page, they come from a VMxyz identifier (chrome's dev tool "this script isn't associated with a URL" identifier). If it's about to fail, most of the "registering listener" console logs come before chrome's "Navigated to https://..." log - all of these logs coming from the VMxyz identifier.
My Question(s)
- I sort of understand chrome's dev tools VMxyz identifier, but I could use help understanding why - some of the time - these console.log() statements come from the actual page and why they sometimes come from the VMxyz.
- I can't wrap my head around why the listeners would stop working sometimes. To me it seems that even if the page did reload mid-listener action, the page would just create the new listeners anyways.
- If someone has a recommendation on how I could further debug this, or fix it completely (please) I would appreciate it.
来源：https://stackoverflow.com/questions/53654516/potential-jquery-listener-race-condition-maybe-chrome-dev-tools-related