#

API Documentation for: NEXT
Show: Inherited Protected Private Deprecated

# Ticker Class

Uses

- EventDispatcher

Defined in: `Ticker:41`
Module: CreateJS

The Ticker provides a centralized tick or heartbeat broadcast at a set interval. Listeners can subscribe to the tick event to be notified when a set time interval has elapsed.

Note that the interval that the tick event is called is a target interval, and may be broadcast at a slower interval when under high CPU load. The Ticker class uses a static interface (ex. `Ticker.framerate = 30;`) and can not be instantiated.

#### Example

     createjs.Ticker.addEventListener("tick", handleTick);
     function handleTick(event) {
         // Actions carried out each tick (aka frame)
         if (!event.paused) {
             // Actions carried out when the Ticker is not paused.
         }
     }

- Index
- Methods
- Properties
- Events

## Item Index

### Methods

- _dispatchEvent
- _getFPS static
- _getInterval static
- _getTime static
- _handleRAF static
- _handleSynch static
- _handleTimeout static
- _setFPS static
- _setInterval static
- _setupTick static
- _tick static
- addEventListener
- dispatchEvent
- getEventTime static
- getMeasuredFPS static
- getMeasuredTickTime static
- getTicks static
- getTime static
- hasEventListener
- init static
- off
- on
- removeAllEventListeners
- removeEventListener
- reset static
- toString
- willTrigger

### Properties

- _captureListeners
- _inited static
- _interval static
- _lastTime static
- _listeners
- _pausedTicks static
- _pausedTime static
- _raf static
- _startTime static
- _ticks static
- _tickTimes static
- _timerId static
- _times static
- framerate static
- interval static
- maxDelta static
- paused static
- RAF static
- RAF_SYNCHED static
- TIMEOUT static
- timingMode static

### Events

- tick

## Methods

### `_dispatchEvent`

(

- `eventObj`
- `eventPhase`

)
protected

Inherited from EventDispatcher: `_dispatchEvent:380`

#### Parameters:

- `eventObj` Object | Event
- `eventPhase` Object

### `_getFPS`

() Number private static

Defined in `_getFPS:348`

Use the framerate property instead.

#### Returns:

Number:

### `_getInterval`

() Number private static

Defined in `_getInterval:322`

Use the interval property instead.

#### Returns:

Number:

### `_getTime`

() private static

Defined in `_getTime:599`

### `_handleRAF`

() private static

Defined in `_handleRAF:522`

### `_handleSynch`

() private static

Defined in `_handleSynch:507`

### `_handleTimeout`

() private static

Defined in `_handleTimeout:533`

### `_setFPS`

(

- `value`

)
private static

Defined in `_setFPS:335`

Use the framerate property instead.

#### Parameters:

- `value` Number

### `_setInterval`

(

- `interval`

)
private static

Defined in `_setInterval:307`

Use the interval property instead.

#### Parameters:

- `interval` Number

### `_setupTick`

() private static

Defined in `_setupTick:544`

### `_tick`

() private static

Defined in `_tick:565`

### `addEventListener`

(

- `type`
- `listener`
- `[useCapture]`

)
Function | Object

Inherited from EventDispatcher: `addEventListener:140`

Adds the specified event listener. Note that adding multiple listeners to the same function will result in multiple callbacks getting fired.

#### Example

     displayObject.addEventListener("click", handleClick);
     function handleClick(event) {
        // Click happened.
     }

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  An object with a handleEvent method, or a function that will be called when the event is dispatched.

- `[useCapture]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

#### Returns:

Function | Object:

Returns the listener for chaining or assignment.

### `dispatchEvent`

(

- `eventObj`
- `[bubbles]`
- `[cancelable]`

)
Boolean

Inherited from EventDispatcher: `dispatchEvent:285`

Dispatches the specified event to all listeners.

#### Example

     // Use a string event
     this.dispatchEvent("complete");

     // Use an Event instance
     var event = new createjs.Event("progress");
     this.dispatchEvent(event);

#### Parameters:

- `eventObj` Object | String | Event

  An object with a "type" property, or a string type. While a generic object will work, it is recommended to use a CreateJS Event instance. If a string is used, dispatchEvent will construct an Event instance if necessary with the specified type. This latter approach can be used to avoid event object instantiation for non-bubbling events that may not have any listeners.

- `[bubbles]` Boolean optional

  Specifies the `bubbles` value when a string was passed to eventObj.

- `[cancelable]` Boolean optional

  Specifies the `cancelable` value when a string was passed to eventObj.

#### Returns:

Boolean:

Returns false if `preventDefault()` was called on a cancelable event, true otherwise.

### `getEventTime`

(

- `runTime`

)
Number static

Defined in `getEventTime:479`

Similar to the getTime method, but returns the time on the most recent tick event object.

#### Parameters:

- `runTime` Boolean

  [runTime=false] If true, the runTime property will be returned instead of time.

#### Returns:

Number:

The time or runTime property from the most recent tick event or -1.

### `getMeasuredFPS`

(

- `[ticks]`

)
Number static

Defined in `getMeasuredFPS:447`

Returns the actual frames / ticks per second.

#### Parameters:

- `[ticks]` Number optional

  The number of previous ticks over which to measure the actual frames / ticks per second. Defaults to the number of ticks per second.

#### Returns:

Number:

The actual frames / ticks per second. Depending on performance, this may differ from the target frames per second.

### `getMeasuredTickTime`

(

- `[ticks]`

)
Number static

Defined in `getMeasuredTickTime:419`

Returns the average time spent within a tick. This can vary significantly from the value provided by getMeasuredFPS because it only measures the time spent within the tick execution stack.

Example 1: With a target FPS of 20, getMeasuredFPS() returns 20fps, which indicates an average of 50ms between the end of one tick and the end of the next. However, getMeasuredTickTime() returns 15ms. This indicates that there may be up to 35ms of "idle" time between the end of one tick and the start of the next.

Example 2: With a target FPS of 30, framerate returns 10fps, which indicates an average of 100ms between the end of one tick and the end of the next. However, getMeasuredTickTime returns 20ms. This would indicate that something other than the tick is using ~80ms (another script, DOM rendering, etc).

#### Parameters:

- `[ticks]` Number optional

  The number of previous ticks over which to measure the average time spent in a tick. Defaults to the number of ticks per second. To get only the last tick's time, pass in 1.

#### Returns:

Number:

The average time spent in a tick in milliseconds.

### `getTicks`

(

- `pauseable`

)
Number static

Defined in `getTicks:491`

Returns the number of ticks that have been broadcast by Ticker.

#### Parameters:

- `pauseable` Boolean

  Indicates whether to include ticks that would have been broadcast while Ticker was paused. If true only tick events broadcast while Ticker is not paused will be returned. If false, tick events that would have been broadcast while Ticker was paused will be included in the return value. The default value is false.

#### Returns:

Number:

of ticks that have been broadcast.

### `getTime`

(

- `[runTime=false]`

)
Number static

Defined in `getTime:465`

Returns the number of milliseconds that have elapsed since Ticker was initialized via {{#crossLink "Ticker/init"}}. Returns -1 if Ticker has not been initialized. For example, you could use this in a time synchronized animation to determine the exact amount of time that has elapsed.

#### Parameters:

- `[runTime=false]` Boolean optional

  If true only time elapsed while Ticker was not paused will be returned. If false, the value returned will be total time elapsed since the first tick event listener was added.

#### Returns:

Number:

Number of milliseconds that have elapsed since Ticker was initialized or -1.

### `hasEventListener`

(

- `type`

)
Boolean

Inherited from EventDispatcher: `hasEventListener:339`

Indicates whether there is at least one listener for the specified event type.

#### Parameters:

- `type` String

  The string type of the event.

#### Returns:

Boolean:

Returns true if there is at least one listener for the specified event.

### `init`

() static

Defined in `init:386`

Starts the tick. This is called automatically when the first listener is added.

### `off`

(

- `type`
- `listener`
- `[useCapture]`

)

Inherited from EventDispatcher: `off:249`

A shortcut to the removeEventListener method, with the same parameters and return value. This is a companion to the .on method.

IMPORTANT: To remove a listener added with `on`, you must pass in the returned wrapper function as the listener. See on for an example.

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  The listener function or object.

- `[useCapture]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

### `on`

(

- `type`
- `listener`
- `[scope]`
- `[once=false]`
- `[data]`
- `[useCapture=false]`

)
Function

Inherited from EventDispatcher: `on:173`

A shortcut method for using addEventListener that makes it easier to specify an execution scope, have a listener only run once, associate arbitrary data with the listener, and remove the listener.

This method works by creating an anonymous wrapper function and subscribing it with addEventListener. The wrapper function is returned for use with `removeEventListener` (or `off`).

IMPORTANT: To remove a listener added with `on`, you must pass in the returned wrapper function as the listener, or use remove. Likewise, each time you call `on` a NEW wrapper function is subscribed, so multiple calls to `on` with the same params will create multiple listeners.

#### Example

        var listener = myBtn.on("click", handleClick, null, false, {count:3});
        function handleClick(evt, data) {
            data.count -= 1;
            console.log(this == myBtn); // true - scope defaults to the dispatcher
            if (data.count == 0) {
                alert("clicked 3 times!");
                myBtn.off("click", listener);
                // alternately: evt.remove();
            }
        }

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  An object with a handleEvent method, or a function that will be called when the event is dispatched.

- `[scope]` Object optional

  The scope to execute the listener in. Defaults to the dispatcher/currentTarget for function listeners, and to the listener itself for object listeners (ie. using handleEvent).

- `[once=false]` Boolean optional

  If true, the listener will remove itself after the first time it is triggered.

- `[data]` optional

  Arbitrary data that will be included as the second parameter when the listener is called.

- `[useCapture=false]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

#### Returns:

Function:

Returns the anonymous function that was created and assigned as the listener. This is needed to remove the listener later using .removeEventListener.

### `removeAllEventListeners`

(

- `[type]`

)

Inherited from EventDispatcher: `removeAllEventListeners:263`

Removes all listeners for the specified type, or all listeners of all types.

#### Example

     // Remove all listeners
     displayObject.removeAllEventListeners();

     // Remove all click listeners
     displayObject.removeAllEventListeners("click");

#### Parameters:

- `[type]` String optional

  The string type of the event. If omitted, all listeners for all types will be removed.

### `removeEventListener`

(

- `type`
- `listener`
- `[useCapture]`

)

Inherited from EventDispatcher: `removeEventListener:219`

Removes the specified event listener.

Important Note: that you must pass the exact function reference used when the event was added. If a proxy function, or function closure is used as the callback, the proxy/closure reference must be used - a new proxy or closure will not work.

#### Example

     displayObject.removeEventListener("click", handleClick);

#### Parameters:

- `type` String

  The string type of the event.

- `listener` Function | Object

  The listener function or object.

- `[useCapture]` Boolean optional

  For events that bubble, indicates whether to listen for the event in the capture or bubbling/target phase.

### `reset`

() static

Defined in `reset:401`

Stops the Ticker and removes all listeners. Use init() to restart the Ticker.

### `toString`

() String

Inherited from EventDispatcher: `toString:370`

#### Returns:

String:

a string representation of the instance.

### `willTrigger`

(

- `type`

)
Boolean

Inherited from EventDispatcher: `willTrigger:350`

Indicates whether there is at least one listener for the specified event type on this object or any of its ancestors (parent, parent's parent, etc). A return value of true indicates that if a bubbling event of the specified type is dispatched from this object, it will trigger at least one listener.

This is similar to hasEventListener, but it searches the entire event flow for a listener, not just this object.

#### Parameters:

- `type` String

  The string type of the event.

#### Returns:

Boolean:

Returns `true` if there is at least one listener for the specified event.

## Properties

### `_captureListeners`

Object protected

Inherited from EventDispatcher: `_captureListeners:106`

### `_inited`

Boolean private static

Defined in `_inited:212`

### `_interval`

Number private static

Defined in `_interval:254`

### `_lastTime`

Number private static

Defined in `_lastTime:262`

### `_listeners`

Object protected

Inherited from EventDispatcher: `_listeners:99`

### `_pausedTicks`

Number private static

Defined in `_pausedTicks:245`

The number of ticks that have passed while Ticker has been paused

### `_pausedTime`

Number private static

Defined in `_pausedTime:228`

### `_raf`

Boolean private static

Defined in `_raf:295`

True if currently using requestAnimationFrame, false if using setTimeout. This may be different than timingMode if that property changed and a tick hasn't fired.

### `_startTime`

Number private static

Defined in `_startTime:220`

### `_ticks`

Number private static

Defined in `_ticks:236`

The number of ticks that have passed

### `_tickTimes`

Array private static

Defined in `_tickTimes:278`

### `_timerId`

Number private static

Defined in `_timerId:286`

Stores the timeout or requestAnimationFrame id.

### `_times`

Array private static

Defined in `_times:270`

### `framerate`

Number static

Defined in `framerate:370`

Indicates the target frame rate in frames per second (FPS). Effectively just a shortcut to `interval`, where `framerate == 1000/interval`.

### `interval`

Number static

Defined in `interval:361`

Indicates the target time (in milliseconds) between ticks. Default is 50 (20 FPS). Note that actual time between ticks may be more than specified depending on CPU load. This property is ignored if the ticker is using the `RAF` timing mode.

### `maxDelta`

Number static

Defined in `maxDelta:155`

Specifies a maximum value for the delta property in the tick event object. This is useful when building time based animations and systems to prevent issues caused by large time gaps caused by background tabs, system sleep, alert dialogs, or other blocking routines. Double the expected frame duration is often an effective value (ex. maxDelta=50 when running at 40fps).

This does not impact any other values (ex. time, runTime, etc), so you may experience issues if you enable maxDelta when using both delta and other values.

If 0, there is no maximum.

Default: 0

### `paused`

Boolean static

Defined in `paused:172`

When the ticker is paused, all listeners will still receive a tick event, but the `paused` property of the event will be `true`. Also, while paused the `runTime` will not increase. See tick, getTime, and getEventTime for more info.

#### Example

     createjs.Ticker.addEventListener("tick", handleTick);
     createjs.Ticker.paused = true;
     function handleTick(event) {
         console.log(event.paused,
             createjs.Ticker.getTime(false),
             createjs.Ticker.getTime(true));
     }

Default: false

### `RAF`

String static readonly

Defined in `RAF:91`

In this mode, Ticker passes through the requestAnimationFrame heartbeat, ignoring the target framerate completely. Because requestAnimationFrame frequency is not deterministic, any content using this mode should be time based. You can leverage getTime and the tick event object's "delta" properties to make this easier.

Falls back on TIMEOUT if the requestAnimationFrame API is not supported.

Default: "raf"

### `RAF_SYNCHED`

String static readonly

Defined in `RAF_SYNCHED:69`

In this mode, Ticker uses the requestAnimationFrame API, but attempts to synch the ticks to target framerate. It uses a simple heuristic that compares the time of the RAF return to the target time for the current frame and dispatches the tick when the time is within a certain threshold.

This mode has a higher variance for time between frames than TIMEOUT, but does not require that content be time based as with RAF while gaining the benefits of that API (screen synch, background throttling).

Variance is usually lowest for framerates that are a divisor of the RAF frequency. This is usually 60, so framerates of 10, 12, 15, 20, and 30 work well.

Falls back to TIMEOUT if the requestAnimationFrame API is not supported.

Default: "synched"

### `TIMEOUT`

String static readonly

Defined in `TIMEOUT:107`

In this mode, Ticker uses the setTimeout API. This provides predictable, adaptive frame timing, but does not provide the benefits of requestAnimationFrame (screen synch, background throttling).

Default: "timeout"

### `timingMode`

String static

Defined in `timingMode:144`

Specifies the timing api (setTimeout or requestAnimationFrame) and mode to use. See TIMEOUT, RAF, and RAF_SYNCHED for mode details.

Default: Ticker.TIMEOUT

## Events

### `tick`

Defined in `tick:120`

Available since 0.6.0

Dispatched each tick. The event will be dispatched to each listener even when the Ticker has been paused using paused.

#### Example

     createjs.Ticker.addEventListener("tick", handleTick);
     function handleTick(event) {
         console.log("Paused:", event.paused, event.delta);
     }

#### Event Payload:

- `target` Object

  The object that dispatched the event.

- `type` String

  The event type.

- `paused` Boolean

  Indicates whether the ticker is currently paused.

- `delta` Number

  The time elapsed in ms since the last tick.

- `time` Number

  The total time in ms since Ticker was initialized.

- `runTime` Number

  The total time in ms that Ticker was not paused since it was initialized. For example, you could determine the amount of time that the Ticker has been paused since initialization with `time-runTime`.