canvas 'requestAnimFrame' est lent quand un feu d'événement

Question

J'ai eu un problème en dessin sur toile. le problème est que lorsque certains événements se déclenchent, le 'requestAnimFrame' est lent.

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

Vous pouvez voir un temps entre le dessin et le dessin en cours suivant.

tapez simplement un texte un peu long sur n'importe quelle zone de texte. vous verrez un écart élevé lorsque vous tapez. Lorsque vous tapez sur la zone de texte dans fsfiddle, il vérifie la couleur du texte

cela prend un peu de temps.Par exemple, tapez 'v' ou 'var', dans mon cas, l'intervalle de temps changent 16 à 58. ou sélectionnez le code source en faisant glisser, cela prend du temps. la raison pourrait être l'accès de DOM ou d'un écran changé.

mais ce ne serait pas tout, je fais un jeu avec socket.io. Quand le jeu reçoit un socekt, le temps d'intervalle est de 100ms ou plus. mais la fonction de socket prend juste 10ms ou 20ms.

C'est un problème critique dans une programmation de jeux.

est-il de toute façon pour le résoudre?

Answer 1

le requestAnimFrame ne tarde pas - ce sont vos calculs qui sont lent regard ici:

http://jsfiddle.net/FwynN/

Answer 2

Vous voulez utiliser Erik Möller's updated version de cette cale plutôt que 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); 
     }; 
}()) 

Je ne suis pas sûr si cela résout le problème, cependant ...