javascript setTimeout 定時器步進函數

Question

我正在嘗試使用自定義計時器創建一個函數，該函數將推進我正在運行的動畫的一幀。 我現在可以讓計時器暫停和恢復，但是我無法找到一種方法來使步進功能正常工作。 我的動畫超時延遲設置為 25 毫秒。

這是我正在使用的內容：

延遲 = 25

    //This function is a custom timer that tracks the start time of a timeout and calculates the remaining time
    // in order to resume at the appropriate frame of animation.
function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
        animate = false;
    };

    this.resume = function() {
        start = new Date();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
        animate = true;
    };

    this.resume();
}

我感謝任何人可以給我的任何幫助，我仍在學習並且從來沒有擅長計時器或計時器事件。

更新我設法解決了我自己的問題！ 這就是我最終得出的結論。

//This function is a custom timer that tracks the start time of a timeout and calculates the remaining time
// in order to resume at the appropriate frame of animation.
function Timer(callback, delay){
    var timerId, start, remaining = delay;

    this.pause = function(){
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
        animate = false;
    };

    this.resume = function(){
        start = new Date();
        window.clearTimeout(timerId);
        timerId = window.setTimeout(callback, remaining);
        animate = true;
    };

    this.step = function(){
        timer.pause();
        animate = false;
        advanceAnimation(true);
    };

    this.resume();
}

Answer 1

您可以使用 Interval 代替 Timeout，它會像一個步驟一樣重復，直到調用 clearInterval() 為止。