Detailed explanation of how to use several timers in CocosCreator

1. setTimeOut

Print abc after 3 seconds. Execute only once.

setTimeout(()=>{console.log("abc"); }, 3000);

Delete the timer and abc will not be output after 3 seconds.

let timeIndex;
timeIndex = setTimeout(()=>{console.log("abc"); }, 3000);
clearTimeout(timeIndex);

setTimeout is written like this, the this output in the test function is the Window object

@ccclass
export default class Helloworld extends cc.Component {
 
    private a = 1;
 
    start() {
        setTimeout(this.test, 3000);
    }
 
    private test(){
        console.log(this.a); //output undefined
        console.log(this); //Window
    }
}

Using Arrow Functions

@ccclass
export default class Helloworld extends cc.Component {
 
    private a = 1;
 
    start() {
        setTimeout(()=>{this.test()}, 3000);
    }
 
    private test(){
        console.log(this.a); //output 1
        console.log(this); //Helloworld
    }
}

2. setInterval

Output abc after 1 second. Repeat the process and output abc every second.

setInterval(()=>{console.log("abc"); }, 1000);

Delete the timer and abc will no longer be output.

let timeIndex;
timeIndex = setInterval(()=>{console.log("abc"); }, 1000);
clearInterval(timeIndex);

Schedule

Each inherited cc.Component has this timer

schedule(callback: Function, interval?: number, repeat?: number, delay?: number): void;

After a delay of 3 seconds, abc is output, and then abc is output every 1 second, and repeated 5 times. So the final output will be 5+1 times abc.

this.schedule(()=>{console.log("abc")},1,5,3);

Delete schedule (if you want to delete it, you can no longer use anonymous functions, you must be able to access the function to be deleted)

private count = 1;
 
start() {
     
    this.schedule(this.test,1,5,3);
 
    this.unschedule(this.test);
}
 
private test(){
    console.log(this.count);
}

Global schedule

It is equivalent to a global timer on cc.director. Note that enableForTarget() must be called to register the id, otherwise an error will be reported.

start() {
    let scheduler:cc.Scheduler = cc.director.getScheduler();
    scheduler.enableForTarget(this);
    //After a delay of 3 seconds, output 1, and then output 1 every 1 second, repeat 3 times. A total of 1+3 outputs are output scheduler.schedule(this.test1, this, 1, 3,3, false);
    //After a delay of 3 seconds, output 1, and then output 1 every 1 second, repeating infinitely scheduler.schedule(this.test2, this, 1, cc.macro.REPEAT_FOREVER,3, false);
}
 
private test1(){
    console.log("test1");
}
 
private test2(){
    console.log("test2");
}

//Delete the timer scheduler.unschedule(this.test1, this);

The above is a detailed explanation of how to use several timers in CocosCreator. For more information about CocosCreator timers, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: