Javascript 脚本执行慢速移动，settimeout未按预期工作

我正在编写一个脚本来创建一个元素中的缓慢移动，但它的性能并没有达到我的预期。我正在使用

settimeout

延迟操作，但现在它的迭代次数超过了5个

步骤的限制，我不知道为什么。谢谢你看


var阶跃；
var阶数=5；
函数init（）{
步长=0；
}
函数render（）{
如果（步骤<步骤）{
console.log（“哟！”）；
设置超时（逐步增加，3000）；
console.log（“步骤：”）；
控制台日志（步骤）；
}
请求动画帧（渲染）；
}
函数阶跃递增（）{
step++；
console.log（“步骤：”）；
控制台日志（步骤）；
}
init（）；
render（）
requestAnimationFrame（）
表示您请求窗口在下次重新绘制窗口之前运行函数
setTimeout（）
将在其他队列中使用超时

因此，由于渲染函数包含
requestAnimationFrame（渲染）
您基本上是告诉计算机：
在每一帧上执行此功能。因此，您基本上在这里创建了一个无限循环，
setTimeout（）
ed函数将永远不会运行以增加步长计数器


var阶跃；
var阶数=5；
函数init（）{
步长=0；
}
函数render（）{
console.log（“步骤：”）；
控制台日志（步骤）；
如果（步骤<步骤）{
step++；
console.log（“哟！”）；
设置超时（渲染，3000）；
}
}
init（）；
render（）要延迟动作requestAnimationFrame应该是这样的

let step = 0;
let steps = 5;

const stepIncrease = () => {
    step++;
    requestAnimationFrame(render);
    console.log("step:", step);
}

function render() {
  if (step < steps) {

    console.log("yo!");
    setTimeout(stepIncrease, 3000);
    console.log("steps:", steps);
  }

}

render();

设步长=0；
步骤=5；
常数阶跃增量=（）=>{
step++；
请求动画帧（渲染）；
日志（“步骤：”，步骤）；
}
函数render（）{
如果（步骤<步骤）{
console.log（“哟！”）；
设置超时（逐步增加，3000）；
日志（“步骤：”，步骤）；
}
}
render（）；

要了解实际发生的情况，请看一下本次谈话
您将requestAnimationFrame与setTimeout误用了。基本上，requestAnimationFrame在一秒钟内被调用60次。因此，在执行stepIncrease之前（3秒之后），函数render已经执行了多次setTimeout

我不确定您想要实现什么，但最简单的解决方案是将
requestAnimationFrame
移动到
stepregress（）
函数中


var阶跃；
var阶数=5；
函数init（）{
步长=0；
}
函数render（）{
如果（步骤<步骤）{
console.log（“哟！”）；
设置超时（逐步增加，3000）；
console.log（“步骤：”）；
控制台日志（步骤）；
}
}
函数阶跃递增（）{
step++；
console.log（“步骤：”）；
控制台日志（步骤）；
请求动画帧（渲染）；
}
init（）；
render（）
您将
requestAnimationFrame
与
setTimeout
误用。基本上，
requestAnimationFrame
在一秒钟内被调用60次。因此，在执行
stepregress
之前（3秒之后），函数
render
已经执行了很多次
setTimeout
您是否考虑过使用
setInterval
？@Amadeus，啊，我想我明白了。有没有更好的方法在动画循环中创建延迟？@kmgt，谢谢，我来看看你能不能移动
setTimeout（stepregress，3000）在
渲染
功能之外？（在
init（）；render（）；