User guide & reference

To start using clockWise.js :

① Download the file here :

② 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.


        S.at(500);

        S.do(a_first_function);

        S.after(1000);

        S.do(a_second_function);

Once the sequence is ready, it can be controlled.


        S.play();

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();


        S.at(500).do(a_first_function);

        S.after(1000).do(a_second_function);


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

        S.play();

Sequence object reference →