cocos2d-js 越来越慢的定时器schedule 制作不变慢的定时器

对于动画控制,可能一点误差,大家不会察觉,但如果多次循环累积或网络同步等,大家就会很清楚意识到schedule的误差问题。

首先做一个例子证明一下:

var InaccuracyTestLayer = cc.Layer.extend({

    ctor: function () {
        this._super();
        var startTime = new Date().getTime();
        var count = 0;
        this.schedule(function(){
            var timePass = new Date().getTime() - startTime;
            count++;
            var delta = timePass - (count*100);
            trace("time pass", timePass, "total delta", delta, "count", count);
        }, 0.1);

        this.scheduleUpdate();
    },

    update: function () {
        for (var i = 0; i < 100000; i++) {
            b = 1/0.22222;
        }
    }
});

帧频越低,变慢得越快。

time pass, 1481, total delta, 381, count, 11 CCDebugger.js:334
time pass, 1608, total delta, 408, count, 12 CCDebugger.js:334
time pass, 1735, total delta, 435, count, 13 CCDebugger.js:334
time pass, 1861, total delta, 461, count, 14 CCDebugger.js:334

那么尝试一下解决问题?

定时器原理:cocos2d-js底层在每一帧计算中,遍历所有定时器,看是否达到触发时间。如果达到则触发该定时器,并把时间重置为当前时间。好了,问题就在于此,“重置为当前时间”。

看看一个新的定时器:

    schedule2: function (callback, interval) {
        var then = Date.now();
        interval = interval*1000;
        this.schedule(function(){
            var now = Date.now();
            var delta = now - then;
            if(delta > interval){
                then = now - (delta % interval);
                callback.call(this);
            }
        }.bind(this), 0);
    }

这里核心是then=now-(delta%interval),每一次触发的时候,把误差算到下次触发的控制中。

例如60fps,那么schedule2每16ms触发一次,用户设定了100ms的interval,那么将有16*7=112>100,7帧才触发1次用户的定时器。这里累积了12ms误差,把12ms算到then中。

那么下次将有12+16*6=108>100,只需要96ms就触发第2次用户的定时器,这次提前了4ms,弥补了第1次的误差。

这个定时器经得起考验,即使在低帧频情况下,仍然保持稳定。

var BetterScheduleLayer = cc.Layer.extend({

    ctor: function () {
        this._super();

        var startTime = Date.now();
        var count = 0;
        this.schedule2(function(){
            var timePass = Date.now() - startTime;
            count++;
            var delta = timePass - (count*100);
            trace("time pass", timePass, "total delta", delta, "count", count);
        }, 0.1);
        this.scheduleUpdate();
    },

    schedule2: function (callback, interval) {
        var then = Date.now();
        interval = interval*1000;
        this.schedule(function(){
            var now = Date.now();
            var delta = now - then;
            if(delta > interval){
                then = now - (delta % interval);
                callback.call(this);
            }
        }.bind(this), 0);
    },

    update: function () {
        for (var i = 0; i < 10000000; i++) {
            b = 1/0.22222;
        }
    }
});

输出:

time pass, 3447, total delta, 47, count, 34 CCDebugger.js:334
time pass, 3510, total delta, 10, count, 35 CCDebugger.js:334
time pass, 3637, total delta, 37, count, 36 CCDebugger.js:334
time pass, 3701, total delta, 1, count, 37 CCDebugger.js:334
time pass, 3828, total delta, 28, count, 38 CCDebugger.js:334
time pass, 3955, total delta, 55, count, 39 CCDebugger.js:334

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

解析opencv中Box Filter的实现并提出进一步加速的方案(源码共享)。

  说明:本文所有算法的涉及到的优化均指在PC上进行的,对于其他构架是否合适未知,请自行试验。       Box Filter,最经典的一种领域操作,在无数...

3807
来自专栏点滴积累

geotrellis使用(三)geotrellis数据处理过程分析

之前简单介绍了geotrellis的工作过程以及一个简单的demo,最近在此demo的基础上实现了SRTM DEM数据的实时分析以及高程实时处理,下面我就以我实...

4216
来自专栏Java技术栈

进阶 | Java生成随机数的几种高级用法!

1493
来自专栏祝威廉

让流动的数据结构化

结构化数据加上一个支持schema变更的存储,加上一个高效易用的支持SQL的数据处理和查询的引擎,简直无所不能和极度高效。

381
来自专栏小鄧子的技术博客专栏

【译】占位图与渐变效果

我们甚至不用解释或者讨论:一个空的ImageView在视觉体验上真的很差,因为这是毋庸置疑的。如果你使用Picasso,你可能更倾向于通过网络连接来加载图像。依...

762
来自专栏前端吧啦吧啦

数据结构(一)之基础知识

934
来自专栏macOS 开发学习

Mac开发跬步积累(一):Cocoa Drawing 之 NSImage imageNamed: 到底做了什么?

首先,NSImage提供了支持多种格式图像数据进行管理的api, 但是NSImage对被其管理的实际图像数据几乎是一无所知的,这是因为NSImage并没有直接与...

823
来自专栏算法channel

程序员必知的算法和数据结构:2500字性能总结

以下5个步骤总结了此方法,依次为如下,我们设计的实验必须是可以重现的,我们形成的假设必须是具有真伪的。

580
来自专栏数说工作室

3行代码实现 Python 并行处理,速度提高6倍!

原标题:Here’s how you can get a 2–6x speed-up on your data pre-processing with Pyth...

845
来自专栏落影的专栏

GPUImage详细解析(七)文字水印和动态图像水印

回顾 GPUImage源码解析、图片模糊、视频滤镜、视频水印都已经介绍过,这次带来的是给视频添加文字水印、动态图像水印。 效果展示 “我是水印”的文字,还有心形...

3595

扫码关注云+社区