画布'requestAnimFrame'在任何事件触发时都很慢

Question

我在画布上绘画时遇到问题。问题是当某些事件触发时，"requestAnimFrame"很慢。

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

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

只需在任何文本框上键入一点点长的文本。 键入时，您将看到一个较高的间隔时间。

当您在 FSFIDDLE 中的文本框上键入时，它会检查文本的颜色。

例如，键入"v"或"var"，在我的例子中，间隔时间变为 16 到 58。 或者通过拖动选择源代码，这需要一段时间。 原因可能是 DOM 的访问或某些屏幕已更改。

但这还不是全部，我正在用 socket.io 做一个游戏，当游戏收到Socekt时，间隔时间为100ms或更长。 但套接字功能只需要10ms或20ms。

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

有没有办法解决它？

Answer 1

requestAnimFrame并不

慢 - 这是你的计算很慢，看看这里：

http://jsfiddle.net/FwynN/

Answer 2

您需要使用Erik Möller的该填充程序的更新版本，而不是Paul Irish的：

(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);
        };
}())

不过，我不确定这是否可以解决问题...