12.简单封装RAF：requestAnimationFrame

前面谈过一些动画的东西：9.浅谈前端实现动画效果的一些方式

今天正好要用上RAF。
之前也说过它的缺点，一是不能设置间隔时间，二是我觉得如果一个页面有多个动画，则需要调用N个requestAnimationFrame。

比如：
动画1  requestAnimationFrame(fn1)
动画2  requestAnimationFrame(fn2)
动画3  requestAnimationFrame(fn3)
.....

能不能在一个requestAnimationFrame下实现？

所以今天简单封装了一下，将以上两个问题解决。

//封装动画RAF函数  代替定时器
const rafQueue=[];
let rafId=0; 
const rafStart=function(t){
    rafQueue.forEach((o)=>{
        if(o.intervalTime==undefined||o.lastTime==0||t-o.lastTime>=o.intervalTime){
            o.fn(t);
            o.lastTime=t;
            return;
        };
    });
    if(rafQueue.length)window.requestAnimationFrame(rafStart);
};
const setRaf=function(fn,intervalTime){
    rafId++;
    rafQueue.push({
        fn,
        intervalTime,
        lastTime:0,
        id:rafId
    });
    if(rafQueue.length==1)window.requestAnimationFrame(rafStart);
    return rafId;
};
const clearRaf=function(id){
    for(let i=0;i<rafQueue.length;i++){
        if(rafQueue[i].id==id){
            rafQueue.splice(i,1);
            break;
        };
    };
};

调用：
let id=setRaf(fn,2000);   //执行函数  间隔时间非必传

停止 
clearRaf(id);