User guide & reference

To start using clockWise.js :

① Download the file here :

↓ clockWise.js version 2.0 (42Kb)

② Place it in your project's directory

③ Link it inside the <head> section of your concerned HTML document(s) like this (assuming you located the file in a directory called "scripts") :

<script type="text/javascript" src="scripts/clockwise.js"></script>

This will make the clockWise object and all of its methods accessible and ready to use in your project.

Syntax : Timeout and Interval objects

→ Just add clockWise. before your setTimeout(), clearTimeout(), setInterval() or clearInterval() calls to use their enhanced versions.

// setTimeout example :

var T = clockWise.setTimeout(some_function, 1000);
// or
var T = clockWise.setTimeout(
function() {
// some instructions here
} , 1000

→ The native functions are still available. But objects returned by them won't accept any "advanced" manipulation, as well as no object returned by a clockWise method will accept a "classical" one. For example :

var classic_T = setTimeout(some_function, 1000);
var enhanced_T = clockWise.setTimeout(some_function, 1000);

clearTimeout(classic_T); // is okay
clockWise.clearTimeout(classic_T); // won't do anything
clearTimeout(enhanced_T); // neither
clockWise.clearTimeout(enhanced_T); // is okay

→ The extended methods are part of the clockWise object too and must be called in a similar way as seen above. They can't be applied to "classic" objects.

var classic_T = setTimeout(some_function, 1000);
var enhanced_T = clockWise.setTimeout(some_function, 1000);

clockWise.pauseTimeout(classic_T); // won't do anything
clockWise.pauseTimeout(enhanced_T); // is okay
pauseTimeout(classic_T); // doesn't exist, may cause an error

→ Just like window.setTimeout() is the same as setTimeout(), window.clockWise.setTimeout() and clockWise.window.setTimeout() are accepted syntax. This also applies to Interval- and Sequence-related methods.

Timeout object reference →
Interval object reference →

Syntax : Sequence objects

→ Dealing with a Sequence object requires three steps.

First, the object must be initialized.

var S = clockWise.setSequence();

Then, events can be set at desired points of a timeline. This is how a more or less complex sequence is built.;;

Once the sequence is ready, it can be controlled.;

In this example, calling the object's play() method will trigger a_first_function() after a 500 milliseconds delay, then a_second_function() after 1000 more milliseconds.

→ Methods can be chained, meaning the previous example can be rewritten as follows :

var S = clockWise.setSequence().at(500).do(a_first_function).after(1000).do(a_second_function).play();

Or maybe in a more convenient style, in logical blocks :

var S = clockWise.setSequence();;

// Later, if a condition is verified or in reponse to a user action;

Sequence object reference →