requestAnimationFrame回调函数中的参数

Question

调用requestAnimationFrame中的callback中的参数作为终止requestAnimationFrame的判断条件，第二次执行时，传进来的参数发生了而改变，导致终止条件判断一直无法成立，形成死循环

代码

// requestAnimationFrame 定义
export function animloop(params:any){
    console.log(params);
    const rafId = requestAnimationFrame(animloop)
    if(params.sport(params.dom) === 'end'){
        cancelAnimationFrame(rafId)
    }    
}

//  requestAnimationFrame  调用
    const sakuraDom  = sakura(500, 300, [0,5], [20,30], [26,226]);
    (document.querySelector('#nav') as HTMLElement).appendChild(sakuraDom.ele)
    animloop({time:0,sport:sport,dom:sakuraDom})

//  sport方法
export function sport (sakura: Sakura):string {
    const sakuraLeft:number = parseInt(sakura.ele.style.left) 
    const sakuraTop:number = parseInt(sakura.ele.style.top) 
    const speedX:number = sakura.speedX
    const speedY:number = sakura.speedX
    sakura.ele.style.left = sakuraLeft + speedX + 'px';
    sakura.ele.style.top = sakuraTop + speedY + 'px';

    if(sakuraLeft>2000 || sakuraLeft>2000){
        sakura.ele.remove()
        return 'end'
    }
    return ''
}

运行结果及报错内容

可见，第一次运行是正常的，后面在运行的时候，传入的参数params变成了一个数字，导致下面的死循环。

各位，能指点一下这个到底错在哪里，怎么解决。

Answer 1

改下面这样，用一个匿名函数来执行animloop并传入params，要不直接将animloop作为执行的函数，js引擎会传入requestAnimationFrame() 开始执行回调函数的时刻作为回调的参数（数字），而不是第一传入的params

    export function animloop(params: any) {
        console.log(params);
        const rafId = requestAnimationFrame(function () {
            animloop(params);
        })
        if (params.sport(params.dom) === 'end') {
            cancelAnimationFrame(rafId)
        }
    }