jQuery later plugin

Posted on november 27th, 2007

Avoid using setTimeout and benefits from jQuery chaining when using timeouts. I've taken this code from Douglas Crockford's teaching while he was extendting Object.prototype to accomplish such task. Unfortunately jQuery does not allow us to extend Object.prototype, but this can be done via extending the jQuery.fn object instead and that's called a jQuery plugin.

The plugin code

(function($) {
    $.fn.later = function(msec, method) {
        var that = this;
        var args = Array.prototype.slice.apply(arguments, [2]);
        if (typeof method === "string") {
            method = that[method];
        } else if (typeof method === "function") {
            method = method;
            args = [];
        }
        setTimeout(function () {
            method.apply(that, args);
        }, msec);
        return that;
    };
})(jQuery);

Passing arguments to later

• The first argument is the number of milliseconds of the timeout.
• The second can be a function or a string
  • function: Will be executed in the current chain context.
  • string: The jQuery method name such as "addClass" or "hide".

    In that case all other arguments are optional and are passed as-is to the jQuery method's you are refering to.

Examples

Simple use

// Show "Saved!" for 3 seconds, hiding slowly
$('#myid').before("Saved!")
        .prev()
        .later(3000, "hide", "slow");


// Chaining later ...
// Highlight an element for 4 seconds,
//   while showing a red "Saved!" notice before it
//   that will fade slowly 3 seconds after the highlight has been truned off
$('#myid')
        .addClass("highlight")
        .before("<p>Saved!</p>")
        .later(4000, "removeClass", "highlight")
        .prev()
        .css("color", "#FF0000")
        .later(7000, "fadeOut", "slow"); // 3 seconds after removingClass (7000ms - 4000ms)

Nesting later

// Change state during a countdown,
// than after hide the countdown and display an exit message
// and finally restore original state
$(".try-countdown").one("click", countdownBehavior);

function countdownBehavior () {
    var count = 5;

    $(this)
        .addClass("alert")
        .after("<span></span>")
        .later(200, function() {

            function countdown() {
                if (count) {
                    $(this)
                        .later(1000, countdown)
                        .next()
                        .text(count--);
                }
            }

            countdown.call(
                // that chain will return the "this",
                // what will countdown will be called from
                $(this)
                    .later(count * 1000, function () {
                        $(this)
                            .removeClass("alert")
                            .text("That's it!")
                            .next().remove()
                            .end()
                            .later(2000, function () {
                                $(this)
                                    .text("try me")
                                    .one("click", countdownBehavior);
                            });
                    })
            );
        });

    return false;
}

try me

later Behavior

• Using later in a jQuery chains does not interupt the chain execution in any way.
• The timeouts are calculated from the beginning of the chain execution, not from the last time a timeout was set (e.g. if you use later more than once in a chain) unless you nest later using the second function argument.
• In a chain, you can use the this keyword in an anonymous function's argument as usual.