画布动画怪异地表现为步进功能

Question

而且我的意思是，大块的帧将执行得非常快，然后在这些块之间停顿很长时间（4-6k毫秒）

其定义明确为每42ms间隔一次。 相反，在第一个调用之后，会有一个暂停，然后突然出现5-6次迭代（您可以通过记录看到）。 它在进行迭代时会正确通过Sprite工作表，但迭代不会一次每42ms 1发生一次。

仅在chrome上进行测试，因为我稍后会将其插入Electron。 但首先我必须弄清楚这一点。

这是js，只有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

只是一个想法（我还不能发表评论）：我发现在SO中使用与DOM元素id相同名称的变量（person1）可能会很混乱。 因为对象person1是使用此ID创建的。