Javascript 未捕获类型错误：未能执行'；requestAnimationFrame'；在'；窗口'；：作为参数1提供的回调不是函数

我不太确定我在这里使用requestAnimationFrame时出了什么问题，因为它似乎正在工作，但它抛出了这个错误

未捕获的TypeError:未能在“窗口”上执行“requestAnimationFrame”：作为参数1提供的回调不是函数

我尝试每3000ms将一个元素旋转90度，然后淡出/淡出一些其他元素。这可能不是最优雅的方式，我怀疑不是，我对JS的理解是相当基本的。如果有人能解释是什么导致了这个错误，我会非常感激

var iteration = 0,
    degrees = 0;   

function rotate_by_90(degrees, iteration) {
    if(iteration <= 3) {
        var deg = degrees - 90,
            new_deg = deg;

        setTimeout(function() {
            $('#rotate').css('transform', 'translateZ(-60px) rotateX(' + deg + 'deg');
            console.log(new_deg + ' degrees');
            iteration++;
            console.log(iteration + ' iteration');
            requestAnimationFrame(rotate_by_90(new_deg, iteration));            
        }, 3000);
    } else {
        $('#rotating_text').fadeOut();
        $('#animation_overlay').fadeIn();
    }
};

requestAnimationFrame(rotate_by_90(degrees,iteration));

var迭代=0，
度=0；
函数旋转90度（度，迭代）{
如果（迭代否，它不工作-您自己调用一次
rotate\u by_90
（立即，而不是在动画帧准备好时！）并传递其返回值（
未定义
）进入
requestAnimationFrame
。相反，您必须将一个函数传递到
requestAnimationFrame
，浏览器将为您调用该函数

您还可以传递一个匿名函数，因此只需添加
（）=>
即可修复代码，如下所示：

requestAnimationFrame（（）=>旋转90度（度，迭代））；


关于如何更好地实现这一点，我建议使用异步函数和实际循环：


//首先，获取setTimeout和requestAnimationFrame的一些预期版本：
const delay=ms=>new Promise（解析=>setTimeout（解析，ms））
const waitForAnimationFrame=（）=>newpromise（解析=>requestAnimationFrame（解析））
//接下来，我们的主要功能是：
异步函数旋转动画（）{
设度=0
//从0循环到3
对于（让迭代=0；迭代控制台.error（'error during animation:'，e））
。旋转{
宽度：60px；
}

一些文本
事情1
事情2
事情3
事情4
一些东西
不，它不起作用-您正在自己调用
rotate\u by_90
并传递其返回值（
未定义
）进入
requestAnimationFrame
。相反，您必须将一个函数传递到
requestAnimationFrame
，浏览器将为您调用该函数

您还可以传递一个匿名函数，因此只需添加
（）=>
即可修复代码，如下所示：

requestAnimationFrame（（）=>旋转90度（度，迭代））；


关于如何更好地实现这一点，我建议使用异步函数和实际循环：


//首先，获取setTimeout和requestAnimationFrame的一些预期版本：
const delay=ms=>new Promise（解析=>setTimeout（解析，ms））
const waitForAnimationFrame=（）=>newpromise（解析=>requestAnimationFrame（解析））
//接下来，我们的主要功能是：
异步函数旋转动画（）{
设度=0
//从0循环到3
对于（让迭代=0；迭代控制台.error（'error during animation:'，e））
。旋转{
宽度：60px；
}

一些文本
事情1
事情2
事情3
事情4
一些东西
requestAnimationFrame（旋转90度。绑定（这个，度，迭代））
也可以。是的，但它的阅读和理解不那么直观。非常感谢，这真的很有帮助，我现在不得不进一步调整它以添加更多动画，但将使用您的建议作为起点，再次感谢！
requestAnimationFrame（旋转90度。绑定（这个，度，迭代））
也可以。是的，但它的阅读和理解不那么直观。非常感谢，这真的很有帮助，我现在不得不进一步调整它以添加更多动画，但将使用您的建议作为起点，再次感谢！
<div id="rotating_text" class="rotating_text">
    <span>Some text </span>
    <div class="rotate_container">
        <div id="rotate" class="rotate">
            <span>thing 1</span>
            <span>thing 2</span>
            <span>thing 3</span>
            <span>thing 4</span>
        </div>                              
    </div>
</div>  

<div id="animation_overlay" class="animation_overlay">                      
    <span>Some stuff</span>
</div>