V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Kasumi20
V2EX  ›  JavaScript

requestAnimationFrame 疑问

  •  
  •   Kasumi20 · 2022-06-09 10:35:23 +08:00 · 1187 次点击
    这是一个创建于 684 天前的主题,其中的信息可能已经有所发展或是发生改变。

    已经有一个组件使用了 requestAnimationFrame ,正在以 60HZ 的频率绘制一个动画,现在另外一个组件又要使用 requestAnimationFrame 绘制动画,那它们的频率都会降低为 30HZ ,怎么让两个组件的频率都是 60HZ ?

    6 条回复    2022-06-10 09:22:55 +08:00
    thinkershare
        1
    thinkershare  
       2022-06-09 12:19:32 +08:00
    并不会降为 30HZ, 不知道你怎么得到这个结论的!
    Kasumi20
        2
    Kasumi20  
    OP
       2022-06-09 14:01:15 +08:00
    @thinkershare 为什么不会,一个全局的函数,它怎么知道是两个组件在调用
    loolac
        3
    loolac  
       2022-06-09 15:10:33 +08:00
    无需知道多少组件调用它,最终渲染时只需要知道调用后的如何影响渲染结果就可以。 `requestAnimationFrame`参数是回调函数,它只会在渲染时被执行。 每一帧被渲染前,你调用 n 次 `requestAnimationFrame`注册了 n 个回调函数, 那么这些函数在下一帧渲染时都会被执行。
    thinkershare
        4
    thinkershare  
       2022-06-09 15:14:11 +08:00
    @Kasumi20 你自己写个测试函数试一下不就知道了
    peterczg
        5
    peterczg  
       2022-06-09 17:54:48 +08:00
    requestAnimationFrame 是浏览器异步宏任务的 API ,调用后只是注册回调队列,等屏幕刷新的时候会执行,是否掉帧执行,取决于回调函数的执行时间和当前 CPU 的负载状态,当浏览器没有在 1/60 s (一般的显示器是 60HZ )内执行完,就会阻塞下一次刷新的执行。

    https://stackoverflow.com/questions/62911574/does-requestanimationframe-can-be-stuck-by-long-javascript
    Al0rid4l
        6
    Al0rid4l  
       2022-06-10 09:22:55 +08:00
    你搞错了 rAF 的机制, rAF 只是帮你把函数注册, 插入到每一帧渲染的间隔时间里执行, 只要你的任务执行时间不超过 1/60s, 那你多次调用 rAF 注册一百个函数也没问题, 只要这 100 个函数总执行时间不超过 1/60s, 那他们就依然都是 60Hz
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5715 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 06:30 · PVG 14:30 · LAX 23:30 · JFK 02:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.