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

Question

在我正在编码的项目中，我正在使用 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"; 
        });

Answer 1

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

此外，大多数现代浏览器都会将点击事件限制为动画帧速率，因此在浏览器触发任何回流之前，您的两次调用可能发生在同一事件循环帧中。
最后，Chrome is very buggy.

但无论如何，对于你正在做的事情，你根本不需要 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";

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

Why is window.requestAnimationFrame not working immediately after page refresh?

javascript

css

animation

requestanimationframe