document.onmousemove延迟

Question

我正在尝试在画布上使用鼠标和键盘控件构建一个昂贵的脚本。 我正在使用document.onmousemove和document.onkeydown / onkeyup来执行此控制，但是当我按下任何按钮时，我有很多“onkeydown”执行，并且鼠标严重滞后。它看起来像“只写鼠标位置缓冲区”或其他东西。当我释放钥匙时，鼠标“模拟”我之前的动作。 我在Firefox和Chrome上测试过，这个问题只存在于FF上。

这是一些代码

    document.onmousemove  = function(e){
        obj = canvas;
        var curleft = curtop = 0;

        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);

        mX = e.pageX - curleft;
        mY = e.pageY - curtop;
    }

    var dt=0.02;
    setInterval(tick, dt*1000);
    update(dt);
    function tick() {

        if((!pause) || step)
        {
            update(dt);
            step = false;
        }
        interact();
        draw();
    }

Answer 1

根据update，interact和draw函数的复杂程度，20 ms的定时器间隔可能太短，占用大量CPU时间。由于JavaScript在单个线程中运行，因此可能会阻止脚本处理鼠标事件。

这些事件可以在浏览器的输入队列中排队，稍后会调度到您的脚本（这可能发生在Firefox中），或者如果您的脚本没有足够快地处理它们（可能会在Chrome中发生），它们可能会被丢弃）。

一些可能的解决方法：

1. 增加计时器间隔。
2. 不是使用setInterval，而是在每次执行setTimeout后尝试使用tick - 这样可以防止多个计时器事件排队并一起开火。