image - jquery touchmove 事件和非常大的内容

Question

我有非常大的内容（很多图片）。我想使用 css3 转换转换。我绑定到 touchmove 事件，并计算新的 x 位置。

但我有问题：x 的位置在移动设备上变化不顺畅（在桌面上一切正常）。Event Touch 带有延迟。

我尝试隐藏不使用的内容（可见性：隐藏）它没有帮助。

Answer 1

尝试限制事件处理程序进行更改的速度。这是违反直觉的，但通过放慢速度，你会让它们看起来更快。touchmove 事件的触发速度非常快，远远快于屏幕的刷新率。

理想情况下，您会使用requestAnimationFrame来做到这一点。

或者，如果这对您的口味来说太实验性了，只需确保您执行事件处理程序操作的速度不超过每秒 60 帧（每 1000/60 毫秒 1 个事件处理程序操作，屏幕的刷新率）。如果在 1000/60 毫秒时仍有问题，请尝试更慢的速率。视频的帧速率为每秒 30 帧。30 到 60 帧之间的内容应该看起来不错。

所以看起来像这样：

var lastFrameTime;
var myTouchMoveHandler = function (e) {
    var now = Date.now();
    if (now < lastFrameTime + 1000/60) {
        return;
    }
    // your event handler code afterward
    // ...
    // then update the lastFrameTime 
    lastFrameTime = now;
}