(for Java)
(for Java)
Web APIs

Gnostice Blog

Monday, June 20, 2016

Async Event Dispatcher

Event Dispatcher utility class to trigger asynchronous event handlers

By Shivaranjini Mithun

HTML5 Document Viewer component is designed in such a way that any number of high-level modules can be registered on top of the basic viewer module such as forms module, search module etc. The base viewer module is self sufficient and it communicates with other high-level modules only through certain predefined events. Sometimes event handlers from high-level layers are asynchronous in nature and return back immediately. Fire and forget approach is good as long as we don’t need to pipeline one operation after another. But sometimes there will be need to make sure that the previous event handler is completed before proceeding to the next operation. For example, in HTML5 Document Viewer component, print() operation has to call save() to make sure all changes are saved to a temporary revision copy of the document on the server before printing. Hence print() has to wait till all high-level modules are done with save event. High-level modules may be updating the server on save(), about the corresponding changes, using ajax etc.

In this article, event dispatcher module and asynchronous operations are explained in detail. All the sample code snippets are shown using TypeScript.

Asynchronous Operations

One way of handling asynchronous operations in JavaScript is by using Promises. A Promise represents an operation that hasn't completed yet, but is expected to do so in the future. This has various advantages over plain callback approach. Promises are containers for future values. When the promise is successful (resolved) or when it has failed (rejected), it notifies all of its "listeners" who want to access this value.

Promise implementation using jQuery deferred objects: Deferred objects were introduced in jQuery 1.5. They are very similar to standard ES6 promise objects but not the same. Deferred is a chainable utility object created by calling the jQuery.Deferred() method. It can register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.

Every Ajax method of jQuery returns a "deferred object" which we can just return from the asynchronous function:

Below code snippet shows simple usage of promise.

//Fetches data asynchronously and returns a promise object
fetchData(): JQueryPromise{
return $.ajax({ url: '/data’, type: 'GET', contentType: 'json' });

var promise = fetchData();

// register a function to get called when the operation is resolved
  alert("data fetching successful”);

// register a failure function when the operation fails
  alert("some problem in data fetching”);

Event Dispatcher

Event Dispatcher module follows Observer pattern and the responsibilities of this module are as follows:

Privacy | Legal | Feedback | Newsletter | Blog | Resellers © 2002-2018 Gnostice Information Technologies Private Limited. All rights reserved.