EVENTER.JS – EVENT AND TASK MANAGEMENT IN JAVASCRIPT

Posted David Fariña

If you are building a big client-side Javascript application, things like custom events for GUI updates and their listeners can cause big headache. Especially if you are not managing them on a central place.

Javascripts only way to simulate custom events is a polling-like setTimeout() or setInterval() mechanism. I will not further explain why it is usually better to use a recursive setTimeout() instead of a setInterval(). If you want to learn more about their differeces, John Resig (the creator of jQuery) has written a very deep article about timers.

Introduction

Recursive function calls with a setTimeout() can be confusing when having 20+ timers. You better cache their timer-ID, otherwise you will not be able to stop the recursion, what can result in many errors. Thats why I wrote a very lightweight library to store all the timers on a central place, while offering an easy-to-use API.
Eventer.js is minified ~1kb light and also provides a command queuer, based on the event API of eventer.js. The command queuer let you store actions of a rich client application in form of functions into a queuer. The command queuer calls sequentially all the functions in its queue, and clears the queue after executing the commands. This way, for example, your HTML is not permanent modified by Javascript.

Example usage

We have a property (debug) in an object (test) which is 0 by default. Now we want to observe that property, that once the property gets changed, we can do something.

// Our test object
var test = {
	debug : 0
}

// Store the state
var lastState = test.debug;

// Call to eventer API
eventer.register('debugExample',
	function() {
		if (lastState !== test.debug) {
			lastState = test.debug;
			return true; // Return true to fire the event
		}
	},
	function() {
		console.log('test.debug is now '+test.debug);
	});

This might look confusing first, but let us take a look at the parameters of eventer.register.

  • debugExample: the name to identify the event
  • fire function: the function which checks if the event should be fired (returns true if it should fire the callback)
  • callback function: gets called, when the event gets fired

Pretty easy, but whats the benefit?

Well, to remove the event and clear its timer-ID, we just need a one-liner now:

eventer.remove('debugExample');

Eventer.js API: Events

Registers a new event

eventer.register(nameId, fireEvent, callback, [optional] onlyFireOnce, [optional] interval);

Removes an event

eventer.remove(nameId);

Additional informations:

  • eventer.events: object with all events and their corresponding timer-ID’s
  • eventer.length: the number of registered events
  • eventer.debug: set to 0 or 1 for eventer log messages

Eventer.js API: Command queuer

Starts the execution of all commands in the queue with an interval of 3000ms

eventer.cmd.start();

Stops the execution of the commands in the queue

eventer.cmd.stop();

Adding commands to the queue will call the functions all together

eventer.cmd.enqueue(commandAsFunction);

Additional informations:

  • eventer.cmd.queue: queue object
  • eventer.cmd.length: current numbers of commands in the queue

I hope you find that small script as useful, as it is for me. Feel free to download and use it in your projects:

Download the source file
Download the minified version (~1kb)

Schreiben Sie einen Kommentar