Is there a way to wait until all listeners have completed (async) tasks?

[julkue]

Hi,

I am using MediatorJS with requireJS modules. After a page change all my listeners will be informed and they will execute some tasks. Some tasks are async. This has the effect that this will not work constantly:

                    showLoader();

                    // Publish page change
                    mediator_.publish(
                        config_.mediator.channel.afterContentNavigation,
                        {
                            "content": $frameDoc,
                            "page": page
                        }
                    );

                    hideLoader();

As you can imagine if a components listens to the afterContentNavigation it will be triggered sure, but the hideLoader() function will may be called before the async task is completed.

Is there a way to handle such things with Mediator-JS?

[ajacksified]

Just to clarify, this is my understanding of your situation:

• Call showLoader
• Publish an event that fires 1-n async events
• After those 1-n async events are finished, you want to call hideLoader

Is that correct?

One way you might accomplish that is to have one of the async handlers fire another event that says "hey, I'm ready to hide the loader now, I have content"- maybe one subscribing function calls out to an AJAX event to load some data, for example. If that's the case, you could do something like:

function myAsyncMethod(properties) {
  ajax.getData(function(data){ 
    renderTemplate();
    props.mediator.publish('page:loaded'); // <- add this publish
  });
} 

showLoader();
mediator.publish('...');

// `once` subscribes to the event, but immediately unsubscribes once fired
mediator.once('page:loaded', hideLoader);

Would that work for your code?

[julkue]

@ajacksified Thank you for the fast response. Yes, you have correct understand me. I have multiple requireJS-modules. After a page load the app will publish page:afterContentNavigation (as used in your example) and therefore all listeners will be called.
If I had only one module that is async it could fire that named event "hey, I'm ready to hide the loader". But what if I have multiple events? If I would hide the loader if the event gets published it only would wait for the first publish.

So imagin I have three modules:

1. ABC
2. DEF
3. GHI

All this three modules are listening to the event page:afterContentNavigation. In the app it will be published. So I call mediator.publish('page:afterContentNavigation');. Now, how could I wait until all async methods inside those plugins are completed? I would have to make a event for each module and build a counter which checks if all those events are fired. If so, it would call the hideLoader().

I'm not happy with that solution and I thought, maybe mediator-js has a solution for this frequently occurring problem.