Question

我正在努力加快网页速度，但由于我不熟悉JavaScript，因此优化并非没有错误。我创建了onclick过渡效果，我想与Window.requestAnimationFrame（）结合使用。当我添加这行代码时，我获得了转换效果，但是在控制台中弹出一条错误消息：

未捕获的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，即当您点击.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确实定义了一个动画过渡，但它将由浏览器自动管理，并且肯定不需要在每个动画帧再次手动设置。一次就够了。

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

1 个答案: