Question

I got a problem in drawing on canvas. the problem is that when some event fire, the requestAnimFrame is slow.

http://jsfiddle.net/pAjYC/4/" rel="no follow" >http://jsfiddle.net/pAjYC/4/

您可以看到当前绘制和下一张绘制之间的时间。

仅在任何文本框中键入一段略长的文字。键入时会看到一个高空差时间。

键入文本框时,它会检查文本的颜色。

需要一点时间。例如, 类型 V 或 var 。在我的例子中, 间隔时间会从 16 到 58, 或者通过拖曳选择源代码, 需要时间。原因可能是 DOM 访问权限或屏幕被更改。

但这并不是全部, 我正在用套接字. io 来玩游戏. 当游戏收到 socekt 时, 间隔时间是100米或以上. 但套接字功能只需要 10 或 20 米。

这是游戏编程中的关键问题。

有什么办法解决吗?

Answer 1

request is not slow - it is your complete expects 慢看这里 :



http://jsfiddle.net/FwynN/

Answer 2

您会想要使用 < a href=" "http://my.opera.com/emoller/blog/2011/12/20/retanimationframe-for-smart-er-animate" rel=“nofollow”>Erik Möller的更新版 ,而不是http://paulirish.com/2011/retanimanationframe-for-smart-animting/"rel="nofolpol" Paul 爱尔兰 S :

(function() {
    var lastTime = 0;
    var vendors = [ ms ,  moz ,  webkit ,  o ];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+ RequestAnimationFrame ];
        window.cancelAnimationFrame = 
          window[vendors[x]+ CancelAnimationFrame ] || window[vendors[x]+ CancelRequestAnimationFrame ];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}())

我不知道这是否解决问题,虽然...

友情链接