【JavaScript】ブラウザアニメーションに最適なタイマー処理をする方法

let startTimeStamp = null;
const callback = timestamp =>{
        // 開始タイムスタンプのセット
    if( startTimeStamp === null ) startTimeStamp = timestamp;
        // 経過時間の取得
    const elapsedTime = timestamp - startTimeStamp;
        // 経過時間からDOM要素変更やcanvas描画などを行う
        // 前回と同じなら何もしない
          ・・・

       // アニメーションを継続するなら、 window.requestAnimationFrame()を実行
    if( 継続条件 )
        window.requestAnimationFrame(callback);
};

window.requestAnimationFrame(callback);

const MyAnime = class{
    #startTimeStamp=null; // 開始時間
    #userCallBack;      // ユーザー指定コールバック
    #bindCallBack;      // #callBackにthisをバインド
    #stop=false;        // 停止フラグ
    #pause=false;       // 一時停止フラグ
    #pauseStart=null;   // 一時停止開始時間
    #pauseTime=0;       // 一時停止していた時間

    constructor(callBack){
        this.#userCallBack = callBack;
        this.#bindCallBack = this.#callBack.bind(this);
    }
    #reset(){ // プライベート変数の初期化
        this.#startTimeStamp = this.#pauseStart = null;
        this.#stop = this.#pause = false;
        this.#pauseTime = 0;
    }
    #callBack(timestamp){ // コールバック処理
        if( this.#startTimeStamp === null ) this.#startTimeStamp = timestamp;
        if( this.#stop ) return; // 停止

        if( this.#pauseStart !== null ) { // 一時停止復帰後の処理
                // 停止時間の加算
            this.#pauseTime += (timestamp-this.#pauseStart);
            this.#pauseStart = null;
        }
        const time = timestamp - this.#startTimeStamp - this.#pauseTime;
            // ユーザーコールバック関数の実行
        const result = this.#userCallBack( time );
            // アニメーション終了
        if( result === false ) { this.#reset(); return;}
        
            // 一時停止処理
        if( this.#pause ){
            this.#pauseStart = timestamp;return;
        }
        window.requestAnimationFrame(this.#bindCallBack);
    }
    start(){ // アニメーション開始
        this.#reset();
        window.requestAnimationFrame(this.#bindCallBack);
        return this;
    }
    stop(){
        if( this.#startTimeStamp !== null ) { // アニメーション中
            this.#stop = true;this.#pause = false;
        }
        return this;
    }
    pause(){
        if( this.#startTimeStamp === null || !this.#stop ) // 停止が優先
            this.#pause = true;
        return this;
    }
    resume(){
        if( this.#pauseStart === null ) return; // 一時停止中ではない
        this.#pause = false;
        window.requestAnimationFrame(this.#bindCallBack);
    }
};

const div = document.getElementById("box");

const animeFunc = time =>{
        const width = Math.floor((time % 3000) / 200) + 1;
        div.style.borderWidth = width + "px";
}
const myAnime = new MyAnime(animeFunc);

document.getElementById("start").addEventListener("click",()=>myAnime.start());
document.getElementById("stop").addEventListener("click",()=>myAnime.stop());
document.getElementById("pause").addEventListener("click",()=>myAnime.pause());
document.getElementById("resume").addEventListener("click",()=>myAnime.resume());