One-time event using deferred object

Not using flag style.

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<button>if first clicked, do something!</button>
<div class="panel"></div>

CSS

.panel{
    display:none;
    background:#000;
    color:#fff;
}

JavaScript

// http://msdn.microsoft.com/en-us/scriptjunkie/gg723713

$.fn.bindOnce = function(event, callback){
    
    var element = $(this[0]);
    var defer = element.data('bind_once_defer_' + event);
    
    // check if the element already has a deferred
    // attached for the given event
    if(!defer){
        
        // if not, create it and make it so
        // it is resolved when the event is fired
        // the first time around
        defer = $.Deferred();
        var deferCallback = function(){
            element.unbind(event, deferCallback);
            defer.resolveWith(this, arguments);
        };
        element.bind(event, deferCallback);
        element.data('bind_once_defer_' + event, defer);
        
    };
    
    // then attach the given callback
    // to the deferred and return the promise
    return defer.done(callback).promise();
    
};

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

$(function(){
    
    var $panel = $('.panel');
    
    var initialize = function(){
        $panel.text('this is a panel area');
    };
    
    var showPanel = function(){
        $panel.slideDown();
    };
    
    var doSomething = $('button').firstClick();
    doSomething.done(initialize);
    doSomething.done(showPanel);
});