cancel-timer

Syntax

cancel-timer: (action command/label) [every (time)] [after (time)][, (action command)...];

To cancel a timer associated to an element, ie. a delayed or repeating action (eg. "after 100ms", or "every 1s"), there are two methods of cancelling the action.

1. By referencing the target element itself and thereby cancelling all actions of the same type.
2. By labelling the action prior to it being cancelled, and then cancelling by label to cancel the specific action.

Cancelling action type by element

You can use any target selector to find the element associated to a delay or repeated action. The delay is connected to the target element itself. For example:

#myButtonA:click {
    #myATag {
        add-class: .classA, .classB after 10s;
    }
}

#myCancelButton:click {
    a {
        cancel-delayed: add-class;
    }
}

In the above example, cancelling the add-class on the a tags will cancel all timed add-class actions for the a tag. So ".classA" will be added immediately, as it is not delayed, and ".classB" will be cancelled if "#myCancelButton" is clicked within 10 seconds of clicking "#myButtonA". See the working example below for clarity :)

Internally we are essentially setting timers on the target selector and then cancelling the timers on request.

All interval timers are cleaned up automatically when the associated target selector is no longer on the page.

Cancelling action by label

If you only want to cancel one action, but not any others associated to an element, you can label the action that you want to cancel and then cancel by the label itself, like this:

For example, assign a label to the action, like this:

$clockTime: new Date().toLocaleTimeString() every 1s label clockTick, cheeseType "cheddar";

Here, the label "clockTick" has been created and assigned to the clock variable which is set to update every 1 second. There is another variable there "cheeseType", which just assigns a type of cheese to a variable, and is only there to show you that the label is assigned to a specific action clause, and not the whole line.

Once that "every" action is running, you can cancel the clock like this:

cancel-timer: clockTick;

And then the action command that updates the clock variable would stop.

Attribute references can be used in label names. Eg. the syntax "myLabel_{@data-ref}" is supported.

Note for building SPAs that have any delayed action commands:

If you a building a single-page application (SPA) and have timers set on the page to do things at various points, make sure that when the user changes to a different page that you cancel your delayed actions if you need to (in a popstate event declaration or elsewhere). Otherwise you may find that things still happen when you change the page. This may be functionality that you want though, so Active CSS is not set up to cancel all delayed events when changing the page by default. You can use the cancel-timer-all command to cancel all delayed actions if you want a fresh start on each page.

cancel-timer