时间戳

首页 > 解决方案 > 为什么 window.requestAnimationFrame 在页面刷新后不能立即工作？

javascript - 为什么 window.requestAnimationFrame 在页面刷新后不能立即工作？

问题描述

在我正在编码的项目中，我使用 window.requestAnimationFrame 以便在每次单击按钮时重复动画。不过我很困惑，因为刷新页面后，如果我单击按钮两次，第二次动画就不会发生。如果我在单击按钮之前单击页面上的其他内容，它仅在第二次有效，但如果我在刷新后立即单击它，则不会。这是单击按钮时的一些代码，但如果您需要更多代码，我可以提供。在此先感谢您的帮助！

submitNewPlunderForm.onclick = () => {
    let users = JSON.parse(localStorage.users);
    let username = newPlunderFormUsername.value;
    if (users[username] === undefined) {
        newPlunderFormUsername.style.border = "1.5px solid #eb3a34";
        newPlunderFormUsername.style.boxShadow = "none";
        newPlunderFormUsername.style.transition = "none"; 
        window.requestAnimationFrame(function() {
            newPlunderFormUsername.style.transition = "box-shadow 200ms";
            newPlunderFormUsername.style.boxShadow = "0 0 5px #eb3a34"; 
        });

标签： javascriptcssanimationrequestanimationframe

解决方案

当页面加载后第一个 rAF 回调触发在不同的实现中变化很大时，并且实际上并没有任何规范，文档必须在回调可以触发之前完全激活，但是浏览器可以添加他们想要的任何延迟。
根据记忆，在 Firefox 中，调用后可能需要大约 20 毫秒，requestAnimationFrame即使使用 60FPS 监视器（即它等待大约两帧），而在 Chrome 上它可能几乎同步发生。

此外，大多数现代浏览器都会将点击事件限制为动画帧速率，因此在浏览器触发任何重排之前，您的两个调用可能发生在同一个事件循环帧中。
最后，Chrome 有很多 bug。

但无论如何，对于您正在做的事情，您根本不需要 rAF，只需同步触发回流：

submitNewPlunderForm.onclick = () => {
    let users = JSON.parse(localStorage.users);
    let username = newPlunderFormUsername.value;
    if (users[username] === undefined) {
        newPlunderFormUsername.style.border = "1.5px solid #eb3a34";
        newPlunderFormUsername.style.boxShadow = "none";
        newPlunderFormUsername.style.transition = "box-shadow 200ms";
        newPlunderFormUsername.offsetWidth; // force reflow
        newPlunderFormUsername.style.boxShadow = "0 0 5px #eb3a34";
    }
});


const newPlunderFormUsername = document.createElement("input");
document.body.append(newPlunderFormUsername);
newPlunderFormUsername.style.boxShadow = "none";
newPlunderFormUsername.style.transition = "box-shadow 2000ms";
newPlunderFormUsername.offsetWidth; // force reflow
newPlunderFormUsername.style.boxShadow = "0 0 5px #eb3a34";

推荐阅读