左鼠标停止并在Chrome上移动时,Html画布滞后

Question

我创建了一个画布,我已经添加了鼠标事件:

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = screenWidth;
canvas.height = screenHeight;

... 

// CALLED AT START:
function setup() {
    // Mouse movement:
    document.onmousemove = function(e) {
        e.preventDefault();
        target.x = e.pageX;
        target.y = e.pageY;
        angle = Math.atan2((target.y - localPlayer.getY()),
            (target.x - localPlayer.getX()));
        // Distance to mouse Check:
        var dist = Math.sqrt((localPlayer.getX() - target.x)
            * (localPlayer.getX() - target.x) + (localPlayer.getY() - target.y)
            * (localPlayer.getY() - target.y));
        var speedMult = dist / (canvas.height / 4);
        socket.emit("update", {
            ...
        });
    }
    document.onmousedown = function(e) {
        e.preventDefault();
    }
}

现在的问题是,当我按住鼠标左键并同时移动鼠标时,我的游戏滞后了很多.只需移动鼠标就不会造成任何延迟.我在chrome和firefox上测试了这个.似乎我只能在chrome上重新创建问题.使用鼠标中键或右键在游戏中具有相同的行为并且不会导致延迟.仅当使用鼠标左键导致滞后时.

我四处寻找答案,发现我应该像这样阻止默认行为:

e.preventDefault();

但这并没有解决问题.我还尝试在屏幕上更新代表鼠标位置的数字.它正常更新.只有游戏本身就滞后了.可能是按下左键时从不调用onMouseMoved？但是为什么用中键和右键调用呢？

问题应该是我在move方法中调用的代码,因为当我没有按住左键时它工作正常,并且它在firefox上运行良好.必须有其他事情发生.

编辑:我决定在chrome上录制,看看发生了什么.结果如下:

有什么奇怪的,当我按下鼠标中键或右键时,游戏也会做同样的事情,但它根本没有延迟.你在做什么铬？

编辑:在这里测试:www.vertix.io注意,不是每个人似乎都能重现这个问题.

感谢您的时间.

Answer 1

当您按住鼠标左键并同时移动它时,您正在拖动.

编辑:在某些版本的Chrome中,有一个错误(当我发布此答案时,我已经拥有它,现在我没有),drag即使没有元素具有draggable属性也会导致事件被触发.通常情况下,drag事件应该只从draggable属性设置为的元素true中激活(默认情况下,图像和锚点是可加深的).

根据MDN,当drag事件被触发时,mouse事件(例如,事件)mousemove不会,这意味着您的函数未被调用.

一种可能的解决方案是对事件drag和mousemove事件使用相同的函数:

function mouseMove(e) {
    //do your things here
    ...
}

document.addEventListener('mousemove', mouseMove);

document.addEventListener('drag', mouseMove);

注意:如果您对两个事件使用相同的函数,您应该知道您在函数中使用的事件的哪些属性,因为drag和mousemove事件之间存在差异.这两个事件不包含完全相同的属性,并且两个事件的某些属性的行为可能不同.

Answer 2

有没有考虑过节流？

查看https://blog.toggl.com/2013/02/increasing-perceived-performance-with-_throttle/