javascript 如何设置mousemove更新速度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5258424/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set mousemove update speed?
提问by Vincent
im generating a function where it needs to set easy and fast a signature. I'm writing the signature in an canvas field. I use jQuery for it, but the refresh rate of mousemove coordinates is not fast enough. What happens is that if you write your signature to fast, you see some white spaces between writed pixels.
我生成了一个函数，它需要轻松快速地设置签名。我正在画布字段中写签名。我用的是jQuery，但是mousemove坐标的刷新速度不够快。发生的情况是，如果您将签名写得很快，您会在写入的像素之间看到一些空白。
How can I set the refresh speed of the mousemove faster?
如何设置mousemove的刷新速度更快？
$("#xx").mousemove(function(e){
ctx.fillRect(e.pageX - size, e.pageY - size, size, size);
$("#pagex").html(e.pageX - size);
$("#pagey").html(e.pageY - size);
}
回答by Piskvor left the building
You can't. The mousemove events are generated by the browser, and thus you are receiving them as fast as the browser is generating them.
你不能。mousemove 事件由浏览器生成，因此您接收它们的速度与浏览器生成它们的速度一样快。
The browser is not obliged to generate the events at any given rate (either by pixels moved, or by time elapsed): if you move the mouse quickly, you will see that a "jump" in coordinates is reported, as the browser is reporting "the mouse has moved, and it is now here", not "...and went through these pixels". In fact, a browser on a slow computer might generate fewer mousemove events, lest the page slow down to a crawl.
浏览器没有义务以任何给定的速率（通过移动的像素或经过的时间）生成事件：如果您快速移动鼠标，您将看到坐标中的“跳跃”被报告，因为浏览器正在报告“鼠标移动了，它现在在这里”，而不是“......并穿过这些像素”。事实上，运行速度较慢的计算机上的浏览器可能会生成较少的 mousemove 事件，以免页面缓慢爬行。
What you could do is to connect successive positions from mousemove events with a straight line - this will obviously not get you any more precision, but it may mitigate the impact.
您可以做的是将 mousemove 事件的连续位置与一条直线连接起来 - 这显然不会让您获得更高的精度，但它可能会减轻影响。
回答by river
You need to make your handler faster.
你需要让你的处理程序更快。
Browsers can drop events if a handler for that event is still running, so you need to get out of the mousemove handler asap. You could try to optimise the code there or defer work till after the mouse movement is complete. Drawing is probably the slowest thing you are doing, so you could store the mouse movements in memory and draw later. This would not update the display until drawing had finished but it would otherwise work better.
如果该事件的处理程序仍在运行，浏览器可以删除该事件，因此您需要尽快退出 mousemove 处理程序。您可以尝试在那里优化代码或将工作推迟到鼠标移动完成之后。绘图可能是您正在做的最慢的事情，因此您可以将鼠标移动存储在内存中并稍后进行绘制。这在绘图完成之前不会更新显示，否则它会更好地工作。
回答by Enriqe
I would suggest (enhancing @river answer):
我建议（加强@river 的回答）：
- in mousemove event handler just save those points mouse moves through into some buffer (array) so your event handler will be as fast as possible
- make your other function which will read those points from buffer and draw it on canvas as lineTo() -> lineTo() -> lineTo() so all points will be connected, no whitespace between them.
- assign this drawing function into a setInterval() so the drawing of your signature will not wait until user finished "drawing", but it will draw that signature with some slight delay after user's finger movements
- 在 mousemove 事件处理程序中，只需将鼠标移动的那些点保存到某个缓冲区（数组）中，以便您的事件处理程序尽可能快
- 制作另一个函数，它将从缓冲区读取这些点并将其绘制在画布上作为 lineTo() -> lineTo() -> lineTo() 这样所有点都将被连接，它们之间没有空格。
- 将此绘图函数分配给 setInterval() 以便您的签名的绘图不会等到用户完成“绘图”，但它会在用户的手指移动后稍微延迟绘制该签名
回答by Dmitry
You can fire your own event based on timer, probably a bad idea but better then nothing if you really need it.
您可以根据计时器触发自己的事件，这可能是一个坏主意，但如果您真的需要它，那么最好不要。
