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);