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函数的复杂程度，20ms的计时器间隔可能太短，并占用大量的CPU时间。由于JavaScript在单个线程中运行，因此这可能会阻止脚本处理鼠标事件。

这些事件可以在浏览器的输入队列中排队，然后被分派到你的脚本中(这可能在Firefox中发生)，或者如果你的脚本没有足够快地处理它们，它们可能会被丢弃(这可能在Chrome中发生)。

一些可能的解决方法：

1. 增加使用setInterval的计时器interval.
2. Instead，在每次执行tick之后尝试使用setTimeout --这将防止多个计时器事件排队并一起触发。