Cocos Creator recording five - event timer

Monitor events

Event processing is done in the node (cc.Node) in. For components, you can register and monitor events through the access point this.node. Listen for events by this.node.on () function to register, as follows:

cc.Class({
  extends: cc.Component,

  properties: {
  },

  onLoad: function () {
    this.node.on('mousedown', function ( event ) {
      console.log('Hello!');
    });
  },  
});

It is worth mentioning that the event listener function can pass on third argument target, a binding response to the caller of the function. Call two ways, the effect is the same:

// 使用函数绑定
this.node.on('mousedown', function ( event ) {
  this.enabled = false;
}.bind(this));

// 使用第三个参数
this.node.on('mousedown', function (event) {
  this.enabled = false;
}, this);

In addition to use on listening, we can also use the once method. once the listener will close listen to events after listening function response.

Close listening

When we no longer care about an event, we can use the method to close off the corresponding monitor events. Note that the parameters must be off method and parameters on method of correspondence, to finish the shutdown.

We recommend writing as follows:

cc.Class({
  extends: cc.Component,

  _sayHello: function () {
    console.log('Hello World');
  },

  onEnable: function () {
    this.node.on('foobar', this._sayHello, this);
  },

  onDisable: function () {
    this.node.off('foobar', this._sayHello, this);
  },
});

Launch event

We can launch event in two ways: emit and dispatchEvent. The difference is that the latter can do event delivery. We start to understand emit events through a simple example:

cc.Class({
  extends: cc.Component,

  onLoad: function () {
    this.node.on('say-hello', function (event) {
      console.log(event.detail.msg);
    });
  },

  start: function () {
    this.node.emit('say-hello', {
      msg: 'Hello, this is Cocos Creator',
    });
  },
});

Delivery event

dispatchEvent method, launch events by this method, will enter the event delivery stage. In Cocos Creator of the event delivery system, we use bubble delivery way. Bubbling delivery will initiate events from the event node, constantly passed up to his parent node until it reaches the root or do event.stopPropagation interrupt processing function in response to a node ().

When we sent from node c event "foobar", if the node a, b have done a listener "foobar" event, the event will in turn be passed to b, a node via c. Such as:

// 节点 c 的组件脚本中
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );

If we no longer want to pass in the event after event interception node b, we can be done by calling the function event.stopPropagation (). Specific methods are as follows:

// 节点 b 的组件脚本中
this.node.on('foobar', function (event) {
  event.stopPropagation();
});

Please note that custom events, please do not directly create cc.Event object in the sending user, because it is an abstract class, create cc.Event.EventCustom objects to distribute.

Event Object

In the event listener callback, developers will receive a cc.Event type of event object event, stopPropagation is cc.Event standard API, other important API includes:

API 名	Types of	significance
type	String	The type of event (event name)
target	cc.Node	Receiving the original object event
currentTarget	cc.Node	Received the current event objects, events in the bubbling stage of the current object may be different from the original object
getType	Funciton	Gets the type of event
stopPropagation	Function	Stop bubbling phase, the event will not be passed on to the parent, the remainder of the current node listeners will still receive event
stopPropagationImmediate	Function	Stop immediately pass the event, the event will not be passed to the parent node of the current node and the remaining listeners
getCurrentTarget	Function	Gets the current target node receives event
detail	Function	Custom event information (belonging cc.Event.EventCustom)
setUserData	Function	Set Custom event of (belonging to cc.Event.EventCustom)
getUserData	Function	Get a custom event information (belonging cc.Event.EventCustom)

System built-in event

These are the common event listener and emission rules in Cocos Creator, we support some of the default system built-in event, you can refer to our follow-up documentation to see how to use:

Mouse, touch: Reference node system events documents
keyboard, gravity sensor: refer to the global system event documentation

Use timers

1. Start a timer

 component.schedule(function() {
     // 这里的 this 指向 component
     this.doSomething();
 }, 5);

This timer above will be performed once every 5s.

2. The more flexible timer

// 以秒为单位的时间间隔
 var interval = 5;
 // 重复次数
 var repeat = 3;
 // 开始延时
 var delay = 10;
 component.schedule(function() {
     // 这里的 this 指向 component
     this.doSomething();
 }, interval, repeat, delay);
上面的计时器将在10秒后开始计时，每5秒执行一次回调，重复3次。

3. only once timer (shortcut)

 component.scheduleOnce(function() {
     // 这里的 this 指向 component
     this.doSomething();
 }, 2);
上面的计时器将在两秒后执行一次回调函数，之后就停止计时。

4. Cancel the timer

Developers can use the callback function itself to cancel the timer:

this.count = 0;
 this.callback = function () {
     if (this.count === 5) {
         // 在第六次执行回调时取消这个计时器
         this.unschedule(this.callback);
     }
     this.doSomething();
     this.count++;
 }
 component.schedule(this.callback, 1);

Here is all a function of Component timers:

schedule: start a timer
scheduleOnce: a start only once the timer
unschedule: cancel a timer
unscheduleAllCallbacks: cancel all timer components