Question

我正在尝试使用JavaScript和requestAnimationFrame创建一个简单的计时器（从0开始计数）。单击某些内容时，我想从0开始计时。当前，当单击按钮时，我的代码显示计时器，但在我看来，requestAnimationFrame正在运行，甚至在调用该函数之前。如果将代码加载到网页上并等待几秒钟，然后单击按钮，您将看到计时器不是从0开始，而是从页面首次加载以来的秒数开始计时。我很茫然，谷歌搜索并没有帮助我弄清楚为什么/如何在调用函数之前开始计时。

我当前的代码：

    import random
    def pin_code(n)
        pin = []
        for i in range(n):
            pin.append(random.randint(0,9))
        print(*pin, sep='')

Answer 1

传递到您的timestamp函数中的DOMHighResTimeStamp（rAFCallback）值不是从第一次运行动画时开始的，而是具有随时间而变化的“时间起源”

https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp

如果脚本的全局对象是Window，则时间起点确定如下：


如果当前Document是Window中加载的第一个，则时间起点是创建浏览器上下文的时间。

如果在卸载窗口中加载的先前文档的过程中，显示确认对话框以让用户确认是否离开前一页，则时间起点是用户确认以下时间的时间导航到新页面是可以接受的。

如果以上方法均不能确定时间原点，则时间原点是负责创建窗口当前文档的导航发生的时间。



如果脚本的全局对象是WorkerGlobalScope（即脚本正在作为Web工作程序运行），则时间起点是创建工作程序的时刻。

在所有其他情况下，时间来源都是不确定的。

因此，如果您想从动画开始时获取时间增量值，则需要自己做，就像这样：

let timestampAtStart = null;
let lastRequestId    = null;

function myAnimateFunction( timestamp ) {
    if( !timestampAtStart ) {
        timestampAtStart = timestamp;
    }

    let timeSinceStart = timestamp - timestampAtStart;

    console.log( timeSinceStart );

    lastRequestId = window.requestAnimationFrame( myAnimateFunction );
}

function startAnimation() {

    if( lastRequestId ) window.cancelAnimationFrame( lastRequestId );

    timestampAtStart = null;

    lastRequestId = window.requestAnimationFrame( myAnimateFunction );
}

requestAnimationFrame在被函数调用之前运行

1 个答案: