Javascript 将requestAnimationFrame用于非动画目的有什么好处?

Javascript 将requestAnimationFrame用于非动画目的有什么好处?,javascript,timer,async-await,settimeout,requestanimationframe,Javascript,Timer,Async Await,Settimeout,Requestanimationframe,我制作了一个“睡眠”计时器函数,递归调用requestAnimationFrame,并在时间用完后返回一个承诺。我使用requestAnimationFrame是否有任何性能优势,还是应该使用setTimeout?我知道requestAnimationFrame对于非常短/快速的等待时间(也称为动画帧)具有更好的性能,但是对于接近或超过一秒的等待时间,它是否会产生影响 var sleep=(时间)=>{ 变量计时器=(t,s,d,r)=>{ 如果(t-s>d){ r(“完成”) }否则{ re

我制作了一个“睡眠”计时器函数,递归调用requestAnimationFrame,并在时间用完后返回一个承诺。我使用requestAnimationFrame是否有任何性能优势,还是应该使用setTimeout?我知道requestAnimationFrame对于非常短/快速的等待时间(也称为动画帧)具有更好的性能,但是对于接近或超过一秒的等待时间,它是否会产生影响

var sleep=(时间)=>{
变量计时器=(t,s,d,r)=>{
如果(t-s>d){
r(“完成”)
}否则{
requestAnimationFrame((newT)=>{timer(newT,s,d,r)})
}
}
返回新承诺((r)=>{
requestAnimationFrame((t)=>{timer(t,t,time,r)})
})
}
(异步()=>{
var message=document.getElementById(“消息”)
while(消息){
message.innerText=“获取”
等待睡眠(1000)
message.innerText=message.innerText+“就绪”
等待睡眠(1000)
message.innerText=message.innerText+“收件人”
等待睡眠(1000)
message.innerText=message.innerText+“等待”
等待睡眠(1000)
}
})()

不仅仅是一种计时方法,正如它的名字所说,它还请求一个动画帧

在浏览器中,确实会首先执行正常任务,然后调用此处理模型的一个特殊部分,该部分将很好地

在大多数事件循环迭代中,不满足进入处理模型的这个可选部分所需的条件,因此不进行渲染,这很好,因为渲染成本很高

尽管规范让实施者选择使用什么样的启发式方法来决定何时更新渲染,但大多数将使用监视器的刷新率作为基本频率。
除此监视器的刷新事件外,它们仅更新标记为需要更新的文档的呈现方式。
大多数情况下,网页不需要重新渲染,只有在动画正在运行或用户确实与之交互时,他们才会将文档标记为需要重新渲染


requestAnimationFrame
是一个工具,我们的web开发人员可以在此更新渲染子过程中使用它,允许我们仅在渲染发生时绘制内容,但它也有将网页标记为动画的副作用,因此,即使可能不需要,浏览器也会强制执行渲染步骤的完全更新

例如,使用Chrome的Performance dev工具,您可以在下面的代码片段中看到,一个简单的空rAF循环将导致复合层操作在每次屏幕刷新时被触发,而它只会在鼠标移动时发生,而这仅仅是因为鼠标移动在内部调用rAF)

const input=document.querySelector(“输入”);
input.oninput=(evt)=>{
rAFLoop();
};
函数rap(){
如果(input.checked){
请求动画帧(RAP);
}
}

激活rAF循环
是的,您绝对应该使用
设置超时
,它用于计时(包括睡眠),而不是用于动画。
requestAnimationFrame
解决方案的性能要差得多,因为您必须重复调用它,这会降低函数的效率。很高兴知道。非常感谢。非常感谢。是的,我一看到上面的第一条评论,就把它改成了setTimeout,就像你看到的一样。