Sample of Deferred Object - One-time event

Sample of Deferred Object - One-time event

by toshimaru

HTML

<button id="myButton">One time event</button>
<div id="msg"></div>

JavaScript

$.fn.bindOnce = function(event, callback) {
    var element = $(this[0]),
        defer = element.data("bind_once_defer_" + event);

    function deferCallback() {
        element.unbind(event, deferCallback);
        defer.resolveWith(this, arguments);
    }

    if (!defer) {
        defer = $.Deferred();
        element.bind(event, deferCallback);
        element.data("bind_once_defer_" + event, defer);
    }
    return defer.done(callback).promise();
};

$.fn.firstClick = function(callback) {
    return this.bindOnce("click", callback);
};

function initializeData() {
    $("#msg").append("initializeData");
}

function showPanel() {
    $("#msg").append(", showPanel");
}

var myEvent = $("#myButton").firstClick();
myEvent.done(initializeData);
myEvent.done(showPanel);
myEvent.done(function() {
    $("#msg").append(", other process");
});