javascript - 检测jQuery鼠标移动得更频繁

我正在制作一个人可以绘制的div。我利用了jQuery中的mousedown/mouseup/mousemove事件。但是问题是，鼠标移动事件的触发速度太慢。当我尝试绘图时，我看不到连接的线，而是分散的点。

这是一个小提琴：http://jsfiddle.net/zose3417/2/

是否有可能使该事件更频繁地触发？

$(document).ready(function() {
    var isPerformingLeftMouseClick = false;
    $('#sketch-box').on('mousedown', function(event) {
        switch (event.which) {
            case 1:
                //alert('Left Mouse button pressed.');
                isPerformingLeftMouseClick = true;
                break;
            case 2:
                //('Middle Mouse button pressed.');
                break;
            case 3:
                //alert('Right Mouse button pressed.');
                break;
            default:
                //alert('You have a strange Mouse!');
        }
    });
    $(document).on('mouseup', function() {
        isPerformingLeftMouseClick = false;
    });
    $('#sketch-box').on('mousemove', function(e) {
        if (isPerformingLeftMouseClick) {
            //var parentOffset = $(this).parent().offset();
           var offset = $(this).offset();
           var relX = e.pageX - offset.left;
           var relY = e.pageY - offset.top;
            var linkDot = $('#dot-box').children().first().clone();
            $(linkDot).css('top', relY);
            $(linkDot).css('left', relX);
            $(this).append(linkDot);
        }
    });
});

最佳答案

没有办法增加鼠标移动的频率，这只是基于浏览器的允许范围。考虑到JavaScript事件循环和运行的不同系统，这很有意义。如果执行setTimeout(500, ..)，则可能直到510、520或更长的时间才会真正被调用，如果有东西在循环中。

获得所需结果的最佳方法是通过在事件之间画线（这样可以保存上一个点并继续进行），也可以使用插值法来“猜测”一个更好的运动。像D3这样的东西会help you do things like interpolation pretty easily。

编辑：
进行此操作的一种好方法是，在浏览器允许的情况下，继续实时绘制点，然后随心所欲地为该运动插入点集。