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

问题描述 投票：0回答：1

我遇到了一个问题，其中在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>

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

console log output

这意味着鼠标按下事件发生在最后一次update调用之前。

我在生产应用程序上遇到了相反的情况：update的调用是通过时间戳进行的，该时间戳在最后一次调用鼠标按下回调之前。

[有人可以向我解释吗？从文档中看，似乎不必以相同的方式对其进行度量，但是同时对它们计时是没有道理的吗？

javascript html timestamp requestanimationframe mousedown
1个回答
0
投票
这里发生的是，AnimationFrameCallbacks队列比UI事件具有higher priority。

[因此，您的UI事件可能会在与绘画帧相同的帧中触发，因此此刻将设置其timeStamp或even by the OS when it received it in the first place。但是，UA将选择优先考虑

AnimationFrameCallbacks

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.