Sample of Deferred Object - Caching Data API responses

Sample of Deferred Object - Caching Data API responses

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form action="javascript:void(0)">
    <input type="text" name="query" value="jquery deferred" />
    <input type="submit" value="search" />
</form>
<ul id="tweets"></ul>

CSS

ul {
    margin-top: 10px;
    font-size: 10pt;
}
li {
    padding: 2px;
    border-bottom: 1px dotted #aaa;
}
li:first-child {
    border-top: 1px dotted #aaa;
}

JavaScript

if ((!window.firebug || !firebug.firebuglite) &&
    (!window.console || !console.firebuglite)) {
    window.console = {};
    window.console['log'] = function () {}
}

$.createCache = function(requestFunction) {
    var cache = {};
    return function(key, callback) {
        if (!cache[key]) {
            cache[key] = $.Deferred(function(defer) {
                console.log('key: ' + key);
                requestFunction(defer, key);
            }).promise();
        }
        return cache[key].done(callback);
    };
};

$.searchTwitter = $.createCache(function(defer, query) {
    return $.ajax({
        url: 'http://search.twitter.com/search.json',
        data: {
            q: query,
            rpp: 5
        },
        dataType: 'jsonp',
        success: defer.resolve,
        error: defer.reject
    });
});

$.showTwitter = function(args) {
    console.log(args);
    var ele = $('#tweets');
    ele.empty().hide();
    $.each(args.results, function(i, tweet) {
        if (tweet.text !== undefined) {
            ele.append('<li>' + tweet.text + '</li>');
        }
    });
    ele.fadeIn();
}

$('form').submit(function() {
    // followings have the same results.
    $.searchTwitter($('input[name=query]').val(), $.showTwitter);
    $.searchTwitter($('input[name=query]').val()).then($.showTwitter);
    return true;
});