cocos2d-js schedule定时器误差解决办法

最新推荐文章于 2021-12-24 00:08:58 发布

DongEnLai_CodeNice

最新推荐文章于 2021-12-24 00:08:58 发布

阅读量3.4k

点赞数

分类专栏： Cocos2dx-js

Cocos2dx-js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

cocos2d-js提供的定时器是有误差的，这会导致游戏的一些逻辑判断出现问题。下面的代码是一个实验，验证一下schedule循环执行的时间误差：

 
        var  
        deviationTestLayer = cc.Layer.extend({ 
       
        ctor: 
        function 
        (){ 
       
        this 
        ._super(); 
       
        //获取初始时间 
       
        var  
        startTime =  
        new  
        Date().getTime(); 
       
        var  
        count = 0; 
       
        //执行定时任务 没0.1s执行一次 
       
        this 
        .schedule( 
        function 
        (){ 
       
        var  
        timePass =  
        new  
        Date().getTime() - startTime; 
       
        count++; 
       
        var  
        delta = timePass - count*100; 
       
        console.log( 
        "timePass=" 
        +timePass + 
        ", total delta=" 
        +delta+ 
        ", count=" 
        +count); 
       
        },0.1); 
       
        } 
       
        });

上面的代码定时器回调函数记录了当前运行时间timePass，误差delta，运行次数count。

下面是在chrome浏览器运行部分截图：

可以发现随着count越来越大，delta误差（和当前运行环境，机器性能，频帧有关）也越来越大。理论上应该执行159次，实际执行了152次！

Cocos2d-js自带的定时器为什么会越走越慢，究其原因，其实schedule是受频帧驱动的，Cocos2d-js框架在每帧的计算中都会遍历全部的定时器，如果此时某个定时器到了触发的时间，则触发这个定时器，框架忽略了定时器周期和帧周期的差距问题，这会导致多次循环之后误差越来越大，甚至漏执行。在一般的游戏开发中，也许没什么影响，那如果在对时间要求很高的游戏中，那如何解决这个问题呢，下面我们来一起优化一下Cocos2d-Js的定时器，实现一个不变慢定时器，请看代码：

 
        mySchedule: 
        function 
        (callbanck,interval){ 
       
        var  
        then = Date.now(); 
       
        console.log(then); 
       
        //用户设定的时间间隔，单位:秒（S） 
       
        interval = interval*1000; 
       
        //bind 传参数this 
       
        this 
        .schedule( 
        function 
        (){ 
       
        var  
        now = Date.now(); 
       
        var  
        delta = now - then; 
       
        if 
        (delta>interval){ 
       
        then = now - (delta%interval); 
       
        callbanck.call( 
        this 
        ); 
       
        } 
       
        }.bind( 
        this 
        ),0);   
        //此处的0表示每帧都触发 
       
        }

mySchedule和cocos2d-js提供的schedule使用方法一样，实现依赖于schedule方法，mySchedule让schedule每帧都触发，也就是游戏的最小时间间隔。在每帧触发的时候，判断当前时间和上一次的时间间隔delta，如果delta超过了用户设定的interval值，则触发用户的回调函数。

其中代码 then = now - （delta%interval）是实现不变慢定时器的关键点，在cocos2d-js中是用then = now。

举个例子说明：假设用户设定interval = 0.1s 也就是100ms触发一次，频帧60fps，每16ms触发一次mySchedule的计算，计算可得16x7=112>100,也就是说，需要112ms才实际出发了用户设定的回调函数，比设定的100ms晚了12ms。而delta%interval是本次出发的误差，为了解决误差就要让then = now - （delta%interval），来达到抵消误差目的。

测试一下新的定时器，是否能达到我们想要的效果：

 
        var  
        deviationTestLayer = cc.Layer.extend({ 
       
        ctor: 
        function 
        (){ 
       
        this 
        ._super(); 
       
        //获取初始时间 
       
        var  
        startTime =  
        new  
        Date().getTime(); 
       
        var  
        count = 0; 
       
        //执行定时任务 没0.1s执行一次 
       
        this 
        .mySchedule( 
        function 
        (){ 
       
        var  
        timePass =  
        new  
        Date().getTime() - startTime; 
       
        count++; 
       
        var  
        delta = timePass - count*100; 
       
        console.log( 
        "timePass=" 
        +timePass + 
        ", total delta=" 
        +delta+ 
        ", count=" 
        +count); 
       
        },0.1); 
       
        this 
        .scheduleUpdate(); 
       
        }, 
       
        mySchedule: 
        function 
        (callbanck,interval){ 
       
        var  
        then = Date.now(); 
       
        console.log(then); 
       
        interval = interval*1000; 
       
        //bind 传参数this 
       
        this 
        .schedule( 
        function 
        (){ 
       
        var  
        now = Date.now(); 
       
        var  
        delta = now - then; 
       
        if 
        (delta>interval){ 
       
        then = now - (delta%interval); 
       
        callbanck.call( 
        this 
        ); 
       
        } 
       
        }.bind( 
        this 
        ),0);   
        //此处的0表示每帧都触发 
       
        }, 
       
        //在update函数中做大量计算，模拟低频帧的情况 
       
        update: 
        function 
        (){ 
       
        for 
        ( 
        var  
        i=0; i<1000000; i++){ 
       
        var  
        b = 1/0.22222; 
       
        } 
       
        } 
       
        });