Javascript requestAnimationFrame和鼠标事件中的时间戳顺序_Javascript_Html_Timestamp_Requestanimationframe_Mousedown

Javascript requestAnimationFrame和鼠标事件中的时间戳顺序

javascript html

Javascript requestAnimationFrame和鼠标事件中的时间戳顺序,javascript,html,timestamp,requestanimationframe,mousedown,Javascript,Html,Timestamp,Requestanimationframe,Mousedown,我遇到了一个问题，在requestAnimationFrame回调和鼠标事件中接收到的时间戳似乎不符合顺序，我的意思是我希望它们会增加（因为我希望时间只朝一个方向移动：），但情况似乎并非如此。可通过以下示例代码进行说明： <html><body> <script type="text/javascript"> let lastTimesamp = -1; function log(name, timestamp) { con

我遇到了一个问题，在

requestAnimationFrame

回调和鼠标事件中接收到的时间戳似乎不符合顺序，我的意思是我希望它们会增加（因为我希望时间只朝一个方向移动：），但情况似乎并非如此。可通过以下示例代码进行说明：

<html><body>

<script type="text/javascript">
    let lastTimesamp = -1;

    function log(name, timestamp) {
        console.log(name, timestamp);
        console.assert(lastTimesamp < timestamp, "Invalid time", lastTimesamp, timestamp);      
        lastTimesamp = timestamp;
    }   

    function update(timestamp) {
        log("update", timestamp);

        requestAnimationFrame(update);
    }

    requestAnimationFrame(update);

    function mouseDown(event) {
        log("mouseDown", event.timeStamp);
    }

    document.body.addEventListener("mousedown", mouseDown, false);  
</script>

</body></html>


设lastTimesamp=-1；
函数日志（名称、时间戳）{
日志（名称、时间戳）；
assert（lastTimesamp


如果开始用鼠标单击，最终可以看到这种输出：

这意味着鼠标按下事件发生在上次update
调用之前
我在我的生产应用程序中遇到了相反的情况：调用update
时使用的时间戳在最后一次调用鼠标按下回调之前
有人能给我解释一下吗？从文档中可以看出，它们似乎不需要以相同的方式进行度量，但在同一时间对它们进行计时是否有意义？
这里发生的是，AnimationFrameCallbacks队列的UI事件数大于
因此，您的UI事件可能在与绘制帧相同的帧中触发，因此它将在此时设置其时间戳
，或者。但是，UA将选择对AnimationFrameCallbacks而不是UI事件回调进行优先级排序，因此UI事件回调将延迟到下一个事件循环迭代
因为rAF回调有自己的时间戳，所以这个时间戳将比UI事件的时间戳高，即使它的回调以前触发过
另外请注意，这可能对调试没有帮助。
这里发生的是，AnimationFrameCallbacks队列的UI事件数大于
因此，您的UI事件可能在与绘制帧相同的帧中触发，因此它将在此时设置其时间戳
，或者。但是，UA将选择对AnimationFrameCallbacks而不是UI事件回调进行优先级排序，因此UI事件回调将延迟到下一个事件循环迭代
因为rAF回调有自己的时间戳，所以这个时间戳将比UI事件的时间戳高，即使它的回调以前触发过
还要注意的是，这可能对调试没有帮助