JSFiddle - React, Tailwind, and code Playground

by nonplus

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<pre id="trace" style="border: solid 1px gray; padding: 0.5em; background: #ff9"></pre>

JavaScript

// Trigger an event and return promise that waits on
// event handler promises
function triggerAsync(emitter, name, evt) {
    evt = _.extend({
        promises: []
    }, evt);
    emitter.trigger(name, evt);
    return $.when.apply(null, evt.promises);
}

// Create an event emitter
var obj = _.extend({}, Backbone.Events);

// Subscribe asynchronous event handler
obj.on("myEvent", function (evt) {
    trace("Async handler 1...");
    var dfd = $.Deferred();
    setTimeout(function () {
        trace("Async handler 1 DONE");
        dfd.resolve();
    }, 2000);
    evt.promises.push(dfd.promise());
});

// Subscribe asynchronous event handler
obj.on("myEvent", function (evt) {
    trace("Async handler 2...");
    var dfd = $.Deferred();
    setTimeout(function () {
        trace("Async handler 2 DONE");
        dfd.resolve();
    }, 1000);
    evt.promises.push(dfd.promise());
});

// Subscribe Synchronous event handler
obj.on("myEvent", function (evt) {
    trace("Sync handler");
});

// Trigger the event
trace("TriggerAsync...");
triggerAsync(obj, "myEvent").then(function () {
    trace("TriggerAsync DONE");
});

// Log to console and UI
function trace(msg) {
    console.log(msg);
    $("#trace").text($("#trace").text() + msg + "\n");
}