jQuery Scheduling Plugin

February 15th, 2007 by Ralf S. Engelschall

During my recent evaluation of JavaScript toolkits I came across jQuery. As mentioned in this other posting, I was really pleased by jQuery. Hence I’ve investigated further and immediately used jQuery to solve a few tasks. One of the results which came out of this jQuery hacking was a reusable scheduling plugin.


This plugin provides the following three main features:

  1. Global Scheduler Class
    There is a global jQuery.scheduler class object which can be instanciated to get a (actually jQuery unrelated) scheduler object. This object provides a thin convenience wrapper around JavaScript’s standard setTimeout() and clearTimeout() functions. The wrapper provides optionally abbreviated time specification, optional task repeating (like setInterval()), optional protected against double-scheduling, support for both stand-alone function and object method calls, optional passing of arbitrary arguments, and support for both a flexible key-value and a convenient positional-argument calling convention on the schedule method.
  2. jQuery Global Scheduler Object
    There is a global scheduler object instanciated for the jQuery object which can be used with the global
    jQuery.schedule(), jQuery.reschedule() and jQuery.cancel() functions.
  3. jQuery Object Scheduling Method
    All jQuery objects are extended with a schedule() method which is a convinience wrapper allowing one to use the “jQuery Global Scheduler Object” to schedule a task for the current jQuery object.

Trivial Example

The following is a trivial example use of the schedule() method on jQuery objects. On click on the text “TEST BUTTON”, it changes its color to blue and after 2 seconds it changes it to red. Additionally, a value 42 is passed through to the scheduled task which “prints” it into a another element for demonstration purposes.

<did="button">TEST BUTTON</div>
<div id="test"></div>

<script type="text/javascript">
        $('#button').click(function () {
            $(this).css("color", "blue").schedule("2s", function (x) {
                $(this).css("color", "red");
                $("#test").html("test: x = " + x);
         }, 42);


The jQuery plugin can be downloaded from the File Repository area.

Leave a Reply