キャンバスアニメーションが不気味ステップ関数

Question

のように振る舞い、（4-6kミリ秒）

その明確に定義されたのをそのことで私が意味する、フレームのチャンクは超高速に実行し、その後長い間チャンク間で一時停止します42msごとに間隔を空けてください。代わりに、最初の呼び出しの後に一時停止があり、5〜6回の反復がバーストに入ります（ロギングで確認できます）。それは繰り返しを通過するときにスプライトシートを適切に通過し、反復は一度に42msごとに起こらない。

これを電子に後で差し込むつもりなので、クロムについてのみテストします。しかし、まずこれを理解しなければなりません。

これはHTMLだけでジャストアイデア（私はまだコメントすることはできません） <canvas id="person1"></canvas>

var people = []; 

    var p1_canvas = document.getElementById("person1"); 
    p1_canvas.width = 321; 
    p1_canvas.height = 571; 

    var p1_img = new Image(); 
    p1_img.src = "person1.png"; 

    var person1 = {x:0,y:0,f:1,max_x:3852-321,max_y:55958-571,canvas:p1_canvas,img:p1_img,width:321,height:571,name:"person1",playing:false}; 
    people[person1.name] = person1; 

    function talk(person){ 
     if(!person.playing){return;} 

     if(person.x == person.max_x){ //next row or at end 3852/12=321 
      if(person.y == person.max_y){ //at end 55958/98=571 
       person.x=0; person.y=0; person.f=0; 
      } else { //next row 
       person.x=0; person.y+=571; 
      } 
     } else { //same row, move 321 to the right 
      person.x+=321; 
     } 

     console.log("frame: "+person.f+" coords:"+person.x+","+person.y); person.f++; 
     //clear old frame and move to x,y 
     var context = person.canvas.getContext("2d"); 

     context.clearRect(0,0,person.width,person.height); 

     context.drawImage(person.img,person.x,person.y,person.width,person.height,0,0,person.width,person.height); 

    } 

    function play(person){ person.playing = true; person.interval = window.setInterval(function(){talk(person1);},42); } 
    function stop(person){ person.playing = false; window.clearInterval(person.interval); } 

Answer 1

で、JSです：私はSO同じ名前の変数（PERSON1）を使用するなど、その中で見つけ DOM要素IDが乱雑になる可能性があります。オブジェクトperson1はこのidで作成されるためです。