Home :: GUI :: Utilities

  1. Introduction
  2. Reference
    1. Globals
      1. scheduler
    2. Contants
      1. Scheduler.INTERVAL
    3. Methods
      1. constructor
      2. process
      3. add_task
      4. delete_task
      5. start
      6. stop
      7. pause_resume
    4. Properties
      1. intervalID
      2. tasks
  3. Use
    1. Loading Scheduler into you SVG Document
    2. Adding a Task
    3. Deleting a Task
    4. Starting and Stopping the Scheduler
    5. Example
  4. Download


While writing *-Roids, I needed a convenient way to schedule various animation events. As a result, I created the Scheduler JavaScript object. A Scheduler object allows you to dynamically add and remove repeating processes from a list of processes. All processes which are controlled by the Scheduler can be stopped and started at any time.







constructor - new Scheduler();


add_task(task, tick_count);







Loading Scheduler into your SVG document

In order to use the Scheduler object in your SVG file, you will need to insert a <script> element inside of your <svg> element. As an example, if Scheduler.js is in the same directory as your SVG document, then you would include the Scheduler object with the following text:

Note that you do not need to create an instance of a Scheduler object. This is done automatically for you when you include the Scheduler.js file into you SVG file. To refer to this automatically created Scheduler object, use the scheduler global variable.

Adding a Task

In order for the scheduler to perform any actions for you, you first need to add some tasks for it to handle. If you have a function called animate and you would like for it to be called every 3 ticks, then you would use the following code:

function animate() {
  // your code here

scheduler.add_task(animate, 3);

Note that you can add an anonymous function to the scheduler as shown below; however, you will not be able to remove the task later. I can implement the deletion of anonymous functions if requested.

  function() {
    // your code here

Deleting a Task

Later, if you decide that you no longer want this task to be processed, then you would call delete_task() as follows:


Starting and Stopping the Scheduler

Once you have added the tasks that you wish to be processed, you will need to start the Scheduler. This is done as follows:


Later, if you wish to stop all processing, you use the following:


Please note that tasks can be added and deleted while the processor is running.


The following example shows the Scheduler being used to animate the transparency of a shape. Although you would most likely implement this animation using SVG's declarative syntax, this does show you a simple example of how to use the Scheduler. To see the complete details of this example, right-click (or control-click) the SVG file and View Source.

Another example can be seen at the end of the Bezier Tutorial in the Tutorials section. The Scheduler is used extensively in my SVG Games.