Javascript spritesheet上的计时

我制作了一张精灵表，并对它进行了编码，这样它就可以在其中运行了。如何使draw函数每秒运行一次。当我让它运行update函数中的函数时，它让精灵表运行得非常快，因为这就是世界更新的速度，但我希望它以不同的速度更新

（函数（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
宽度=1000，
高度=200，
玩家={
x：宽度/2，
y:身高-15，
宽度：48，
身高：64，
速度:3,，
velX:0，
结果:0,，
跳跃：错，
接地：错，
计数：0，
img:newimage（）
},
键=[]，
摩擦力=0.8，
重力=0.3；
player.img.src=“img/playerseet.png”；
player.img.onload=平局；
var-sprX；
var sprY；
设置超时（抽签，3000）；
变量框=[]；
//尺寸
推({
x:0,，
y:0，
宽度：10，
高度：高度
});
推({
x:0,，
y：高度-2，
宽度：宽度，
身高：50
});
推({
x：宽度-10，
y:0，
宽度：50，
高度：高度
});
推({
x:120，
y:100，
宽度：80，
身高：80
});
推({
x:250，
y:150，
宽度：80，
身高：80
});
推({
x:400，
y:180，
宽度：80，
身高：80
});
推({
x:270，
y:150，
宽度：40，
身高：40
});
画布宽度=宽度；
canvas.height=高度；
函数绘图（）{
请求动画帧（绘制）；
sprX=（player.count%3）*171；
sprY=数学地板（player.count/9）*351；
ctx.drawImage（player.img，sprX，sprY，171351,50,50,32,32）；
如果（player.count==2）
player.count=0；
其他的
player.count++；
}
函数更新（）{
//检查钥匙
如果（键[87]| |键[32]）{
//向上箭头或空格
如果（！player.jumping&&player.grounded）{
player.jumping=true；
player.grounded=false；
player.velY=-player.speed*2；
}
}
如果（键[68]）{
//右箭头
如果（player.velX-player.speed）{
player.velX--；
//player.img.src=“img/player.png”；
}
}
如果（键[83]）{
//向下箭头
//player.img.src=“img/player\u cruch.png”；
}
player.velX*=摩擦力；
player.velY+=重力；
ctx.clearRect（0，0，宽度，高度）；
ctx.fillStyle=“黑色”；
ctx.beginPath（）；
player.grounded=false；
对于（变量i=0；i=oY）{
如果（vY>0）{
colDir=“t”；
形状a.y+=oY；
}否则{
colDir=“b”；
shapeA.y-=oY；
}
}否则{
如果（vX>0）{
colDir=“l”；
shapeA.x+=oX；
}否则{
colDir=“r”；
shapeA.x-=oX；
}
}
}
返回colDir；
}
document.body.addEventListener（“向下键控”，函数（e）{
键[e.keyCode]=真；
});
文件.正文.附录列表（“键控”，功能（e）{
密钥[e.keyCode]=假；
});
addEventListener（“加载”，函数（）{
更新（）；
});

平板游戏
箭头键移动，空格键跳跃
帆布{
边框：1px实心#D3；
背景色：#f1f1；
}
如果我理解正确，您的
绘图功能只是在3x3精灵中循环并不断绘图。您可以尝试的一种方法是设置自己的帧速率（fps）并检查与开始时间的偏移：

var fps = 24;
var msPerFrame = 1000 / fps;
var startTime;

function draw() {
  if (!startTime) startTime = Date.now();
  var elapsedTime = Date.now() - startTime;
  var spriteIndex = Math.floor(elapsedTime / msPerFrame) % 9;

  requestAnimationFrame(draw);
  sprX = (spriteIndex % 3) * 171;
  sprY = Math.floor(spriteIndex / 9) * 351;
  ctx.drawImage(player.img, sprX, sprY, 171, 351, 50, 50, 32, 32);
}

我用一个4x4的sprite表制作了一个工作小提琴，并尝试重用大量代码，以便您可以看到正在发生的事情。
如果我理解正确，您的
绘图功能只是在3x4 sprite中循环并不断绘图。您可以尝试的一种方法是设置自己的帧速率（fps）并检查与开始时间的偏移：

var fps = 24;
var msPerFrame = 1000 / fps;
var startTime;

function draw() {
  if (!startTime) startTime = Date.now();
  var elapsedTime = Date.now() - startTime;
  var spriteIndex = Math.floor(elapsedTime / msPerFrame) % 9;

  requestAnimationFrame(draw);
  sprX = (spriteIndex % 3) * 171;
  sprY = Math.floor(spriteIndex / 9) * 351;
  ctx.drawImage(player.img, sprX, sprY, 171, 351, 50, 50, 32, 32);
}

我用一张4x4的sprite表制作了一把工作小提琴，并尝试重用您的许多代码，以便您可以看到发生了什么。