Javascript Window.requestAnimationFrame（）无法与stopImmediatePropagation一起工作

我正试图加快网页的速度，但由于我是JavaScript新手，所以优化不会没有错误。我创建了onclick过渡效果，我想与Window.requestAnimationFrame结合使用。当我添加这行代码时，我得到了转换效果，但控制台中会弹出一个错误，并显示一条消息：

未捕获类型错误：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);  

未捕获的TypeError:Window.requestAnimationFrame不是当您的兄弟不支持requestAnimationFrame时发生的函数。 但如果是这样，我会感到惊讶。 您正在进行的循环是requestAnimationFrameshowNews的效果。 第一次调用showNews时，即当您单击.Menu_news时，它会要求自己在下一个动画帧再次调用showNews。 当它被再次调用时，它会再次调用，所以它会被调用第三次，然后是第四次，依此类推。 因此，您的浏览器似乎支持requestAnimationFrame。 如果它真的不需要，试着用一个聚填充物，比如，但我真的认为你不需要它

但会抛出错误的是event.stopImmediatePropagation；因为当requestAnimationFrame调用showNews时，它不会给它一个事件，而是给它一个数字一个时间戳。这个数字显然没有stopImmediatePropagation方法。我相信这就是你所犯错误的根源

要修复它，您可以做的是替换event.stopImmediatePropagation；与：

它将解决这一紧迫问题

但这可能不是你真正想要达到的，尽管我不知道这是什么

实际上，像您在这里所做的那样创建动画循环是没有意义的。 showNews中没有任何旨在使某些内容动画化的操作。 更糟糕的是，由于您正在创建的requestAnimationFrame，即使模糊和聚焦功能正常工作，也只会阻止用户对.News节点进行聚焦。

---

您正在创建的CSS确实定义了动画过渡，但它将由浏览器自动管理，并且肯定不需要在每个动画帧上再次手动设置。一次就够了。

试试requestAnimationFramefunctionts{console.log'requestAnimationFrame调用位置：'+ts；}；由于再次从requestAnimationFrame调用showNews，您的其他代码将创建一个无限循环。requestAnimationFrame未接收事件。。。阅读文档，因为我刚刚学习JavaScript，我想我只是误解了requestAnimationFrame。我认为这种方法对任何动画或过渡效果、悬停效果等都有帮助。不，CSS动画不需要requestAnimationFrame。requestAnimationFrame用于创建高性能JS驱动的动画。如果您感兴趣，这里有一篇关于它的文章：

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