Javascript 画布动画的行为很奇怪，就像一个步进函数

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

其明确定义为每42ms间隔一次。相反，在第一次调用之后，会有一个暂停，然后5-6次迭代会突然出现（您可以通过日志记录看到）。当它通过迭代时，它正确地通过了sprite表，迭代不是每42ms一次发生一次

只在铬上测试，因为我稍后将把它插入电子。但首先我必须弄清楚这一点

这是js，只有html是

只是一个想法（我还不能评论）：

---

我在中发现，使用与DOM元素id同名的变量（person1）可能会很混乱。因为对象person1是使用此id创建的。

请编写代码executable@SPMai，stackoverflow上有一个小按钮，允许您使代码可执行。看这里：你可以复制粘贴我的js+html到一个文件，并在浏览器中打开它来测试。。。没有控制台错误，动画无法在浏览器中平滑或按时渲染，这不是我评论的重点。我说过，如果可能的话，你应该总是让你的代码可以执行。我只是不明白为什么它在这里是相关的。但总的来说，我会记住银行的评论。我会尝试重新命名，如果有什么不同，我会告诉你。但是，你说的“SO”是什么意思？SO=StackOverflow在我的实际页面中，我尝试过重命名变量，没有区别，虽然代码执行顺利，但动画并不顺利，我不确定这是性能问题还是因为我的精灵太大

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