Window.requestAnimationFrame（）与stopImmediatePropagation结合使用不起作用

Question

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

未被捕获的TypeError：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

未捕获的TypeError：当您的兄弟不支持requestAnimationFrame时， Window.requestAnimationFrame不是函数 。 但如果是这样，我会感到惊讶。 您正处于混乱中的循环是requestAnimationFrame(showNews) showNews）的效果。 正在发生的事情是，在第一时间showNews被调用，即当你点击.Menu_news ，它请求本身（ showNews ）要在下一次动画帧再次调用。 然后，当再次调用它时，它将再次执行此操作（因此它将被第三次调用，然后第四次调用，依此类推）。 因此，您的浏览器看起来像支持requestAnimationFrame 。 如果真的没有，尝试使用填充工具像这一个 ，但我真的不认为你需要它。

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

解决该问题的方法是替换event.stopImmediatePropagation(); 与：

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

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

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

确实，像在此处那样创建动画循环是没有意义的。 showNews中没有任何旨在制作动画的操作。 更糟糕的是，即使blur和focus功能正常运行，也只会阻止用户将焦点集中在.News节点上（因为正在创建的requestAnimationFrame ）。 您正在创建的CSS确实定义了动画过渡，但是它将由浏览器自动管理，并且肯定不需要在每个动画帧处再次进行手动设置。 一次就足够了。