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.
This global variable is set to a new Scheduler object upon inclusion of the Scheduler.js file. In order to use the scheduler, all calls should be made using this variable.
Scheduler uses the setTimeout function call which requires a parameter which specifies how many milliseconds should pass before a function is called. Scheduler.INTERVAL is the number of milliseconds between calls to the Scheduler. In the reference below, one tick is equal to Scheduler.INTERVAL milliseconds. The current default is 30 milliseconds.
constructor - new Scheduler();
This method is used to create a new Scheduler object. There is no need to call this function since a scheduler object is created automatically when Scheduler.js is included into your SVG file.
This is an object method which is called by the setTimeout method set when the scheduler is started. This method is responsible for traversing the list of Task objects which are maintained by the scheduler. Each Task object has it's decrement() method called. It is the responsibility of the Task object to interpret the meaning of decrement() call.
add_task is used to add a new task which will be maintained by the Scheduler object.
task is a reference to a function which will be processed every tick_count ticks.
tick_count is an integer which represents the number of ticks between each invocation of the passed task function reference.
delete_task is used to remove a task from the Scheduler.
task is a reference to a function which needs to be removed from the Scheduler. This parameter must be equal to the same reference used when adding the task.
start begins the Sheduler's processing of it's tasks.
stop stops the Sheduler from processing it's tasks.
pause_resume is a convenience function which will determine if the Scheduler is running or not. If it is running then it is stopped. If it is stopped then it is started.
intervalID is the timeoutID which can be used to stop a currently waiting setTimeout call. This should never be used outside of the Scheduler object.
tasks is an array of Task objects that are being handled by the Scheduler object.
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:
<script xlink:href="Scheduler.js" />
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.
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.
scheduler.add_task(
function() {
// your code here
}
);
Later, if you decide that you no longer want this task to be processed, then you would call delete_task() as follows:
scheduler.delete_task(animate);
Once you have added the tasks that you wish to be processed, you will need to start the Scheduler. This is done as follows:
scheduler.start();
Later, if you wish to stop all processing, you use the following:
scheduler.stop();
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.