javascript - Window.requestAnimationFrame() 不能与 stopImmediatePropagation 结合使用

Question

我正在尝试加快网页速度，但由于我是 JavaScript 的新手，优化并非没有错误。我创建了我想与 Window.requestAnimationFrame() 结合使用的 onclick 过渡效果。当我添加这行代码时，我得到了过渡效果，但控制台中弹出一条错误消息:

未捕获类型错误:Window.requestAnimationFrame 不是函数。此消息以毫秒为单位在控制台中重复出现。所以我在几分钟内收到了数千条消息。就像某种循环。

代码如下:

    function showNews(event) {
        requestAnimationFrame(showNews);
        event.stopImmediatePropagation();
        document.getElementsByClassName("News")[0].style.cssText = "width:45%; height: 100%; transition: 0.5s; overflow-y: auto";
        document.getElementsByClassName("Menu_item")[1].getElementsByTagName("A")[0].blur();
        document.getElementsByClassName("News")[0].focus();
    } 
document.getElementsByClassName("Menu_news")[0].addEventListener("click", showNews, false);  

Answer 1

Uncaught TypeError: Window.requestAnimationFrame is not a function 当你的兄弟不支持 requestAnimationFrame 时发生。但如果是这样的话，我会感到惊讶。您正确看到的循环是 requestAnimationFrame(showNews) 的效果。发生的事情是第一次调用 showNews，即当您单击 .Menu_news 时，它请求调用自身 (showNews)再次在下一个动画帧。然后当它再次被调用时，它会再次调用(因此它将被调用第三次，然后是第四次，依此类推)。所以你的浏览器看起来支持 requestAnimationFrame。如果确实没有，请尝试使用像 this one 这样的 polyfill但我真的不认为你需要它。

尽管 event.stopImmediatePropagation(); 会抛出错误，因为当 requestAnimationFrame 调用 showNews 时，它不会给它一个事件而是一个数字(时间戳)。这个数字显然没有stopImmediatePropagation方法。我相信这是您遇到的错误的根源。

要解决这个问题，您可以将 event.stopImmediatePropagation(); 替换为:

if(event && isNaN(event)){
    event.stopImmediatePropagation();
}

它将解决这个紧迫的问题。

但这可能不是您真正想要实现的目标(尽管我不知道它是什么)。

确实像您在此处所做的那样创建动画循环没有意义。showNews 中没有任何旨在使某些内容具有动画效果的操作。更糟糕的是，即使 blur 和 focus 功能正常工作，也只会阻止用户关注 .News 节点(因为 requestAnimationFrame 你正在创建)。您正在创建的 CSS 确实定义了一个动画过渡，但它将由浏览器自动管理，并且肯定不需要在每个动画帧上再次手动设置。一次就够了。