为什么 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"; 
        });

解决方法

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

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

但无论如何，对于您正在做的事情，您根本不需要 rAF，只需 trigger a reflow synchronously：

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";

animation animation javascript