Question

我在画布上画画时遇到了问题。问题是，当某些事件触发时，＆＃39; requestAnimFrame＆＃39;很慢。

http://jsfiddle.net/pAjYC/4/

您可以在当前图形和下一个图形之间看到时间。

只需在任何文本框中键入一点点长文本即可。当你输入时，你会看到很长的间隙时间。

在fsfiddle中键入文本框时，会检查文本的颜色。

需要一点时间。例如，键入＆＃39; v＆＃39;或者＆＃39; var＆＃39;，在我的情况下，间隙时间更改为16到58.或通过拖动选择源代码，需要一些时间。原因可能是DOM的访问或某些屏幕的更改。

但这不是全部，我正在与socket.io进行游戏。当游戏收到一个socekt时，间隔时间为100ms或更长。但是socket函数只需要10ms或20ms。

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

无论如何要解决它？

Answer 1

requestAnimFrame并不慢 - 这是你的计算在这里看起来很慢：

http://jsfiddle.net/FwynN/

Answer 2

您希望使用该垫片的Erik Möller's updated version而不是Paul Irish'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);
        };
}())

我不确定这是否能解决问题，但是......

任何事件触发时，canvas'requestAnimFrame'都很慢

2 个答案: