计时器
JavaScript自带的定时任务
setTimeout
作用:设置一个定时器,在指定时间(毫秒)后触发,调用传入的回调函数。
参数类型:(function/code, delayTime, args…)
function: 回调函数
code: 字符串形式的代码,会使用eval()执行,因此不推荐使用
delayTime: (可选) 延迟的时间(毫秒),默认0,尽快执行。
args: (可选) 不定长参数列表,会传递给回调函数
setInterval
作用:设置一个定时器,每隔一段时间触发一次,调用传入的回调函数。
参数类型:(function/code, delayTime, args…)
和sertTimeout一致,区别是setInterval会一直执行回调函数,但setTimeout**仅执行一次。**delayTime就是每次间隔的时间。
注意事项
- 回调函数中的this可能和你期望的不太一样,所以一般会使用箭头函数/bind的方式修改this的指向
// UserInfoView.js
cc.Class({
extends: cc.Component,
ctor () {
// 定义测试变量
this.testInfo = 222;
},
start () {
// 1. 箭头函数
setTimeout(() => {
// do something
}, 10000);
// 2. bind方式
setTimeout(function() {
// do something
cc.log(this); // 指向当前组件 UserInfoView{xxxxx}
cc.log(this.testInfo); // 222
}.bind(this), 1000);
// 3. 直接传递
setTimeout(function() {
// do something
cc.log(this); // 指向Window对象
cc.log(this.testInfo); // undefined
}, 1000);
}
- 回调函数并不一定会精准的按照设定的时间被触发,详情可以参考MDN的文章实际延时比设定值更久的原因:最小延迟时间。
Cocos Creator中的定时任务(计时器)
schedule
作用:结合了setTimeout和setInterval,如官方文档所说,提供了更大的灵活性,可以设置执行次数、第一次的延迟以及触发间隔时间。注:该方法定义于cc.Component,故只能在继承cc.Component的对象上调用(从编辑器创建的js类会默认继承cc.Component)。
参数列表:(callback, interval, repeat, delay)
callback: 回调函数
interval: 触发间隔(秒)
repeat: 重复次数,可设置cc.macro.REPEAT_FOREVER让它一直重复。注:实际执行次数是重复次数+1
delay: 延迟时间(秒)
设置定时器
// CCComponent.js cocos2d\core\components\CCComponent.js
schedule (callback, interval, repeat, delay) {
// 1619: callback function must be non-null 回调函数不能为空
cc.assertID(callback, 1619);
// 默认触发间隔为0
interval = interval || 0;
// 1620:interval must be positive 间隔必须是有效的(>=0)
cc.assertID(interval >= 0, 1620);
// repeat不是数字时, 默认为无限重复
repeat = isNaN(repeat) ? cc.macro.REPEAT_FOREVER : repeat;
// 默认延迟时间为0
delay = delay || 0;
// 获得获取系统定时器(是唯一的,cc.director是单例的,在init方法中创建了一个Scheduler定时器)
// scheduler: cc.Scheduler类型 定义于engine/cocos2d/core/CCScheduler.js
var scheduler = cc.director.getScheduler();
// scheduler内部维护了一个叫_hashForTimers的键值对,通过传入的this可以获得一个HashTimerEntry对象(定义于CCScheduler)
// HashTimerEntry中保存了paused属性(boolean),当组件_onDisabled/_onEnabled时,paused会被设置为true/false
// 也有可能是_hashForUpdates。_hashForTimers保存的是自定义定时器的信息,_hashForUpdates保存的是update定时器的信息
var paused = scheduler.isTargetPaused(this);
// 调用CCScheduler中的方法,这里传递的target为this,所以回调函数不需要bind/使用箭头函数
scheduler.schedule(callback, this, interval, repeat, delay, paused);
}
// CCScheduler.js cocos2d\core\CCScheduler.js
schedule: function (callback, target