title: A centralized system to make components communicate to each other
body: <p>I've been reading StackOverflow for many years now but I finally have a problem I need help with that I cannot find a proper answer to.</p>
  
  <p>Current situation:
  I have a library of custom JS components (like a grid, datepicker, popup, etc)
  In order for the components to communicate to each other, I have implemented a pub/sub mechanism based on the following two rules:
  publisher: event -> message
  subscriber: message -> event</p>
  
  <p>in addition to that, I use quite a few custom events, set up using jQuery, and there is a way (using data attributes) to define for each component which event should be triggered on load.</p>
  
  <p>for example:
  the grid triggers the 'initialize' event on load, 'initialize' triggers 'refresh', etc.</p>
  
  <p>now, I can have a datepicker that also triggers 'initialize' on load
  the problem arises when the datepicker publishes a message that the 'refresh' event of the grid is subscribed to.
  what happens then is:</p>
  
  <ul>
  <li>datepicker <strong>'initialize'</strong> is triggered on load</li>
  <li>while initializing the value is changed, that triggers a <strong>'change'</strong> event</li>
  <li>the <strong>'change'</strong> event publishes a message, let's say <strong>'date_changed'</strong></li>
  <li>the grid listens to the message and triggers the <strong>'refresh'</strong> event</li>
  </ul>
  
  <p>and that is how the <strong>'refresh'</strong> event of the grid gets triggered before the <strong>'initialize'</strong> event, which is obviously an issue</p>
  
  <p>I am thinking about implementing some sort of event queue, where instead of triggering an event, it is added to a queue and then processed later, but since JavaScript is fundamentally single threaded, it is a bit annoying to implement</p>
  
  <p>Question:
  Any ideas how to fix this? including the above, or any other possible solution</p>
  
  <p>thanks a lot for your time</p>