可拖动的拖拽事件限制

Question

我正在尝试在html5画布上制作一个动画，当它被移动时应该跟随一个可拖动的div，类似的东西：

draggable_div.draggable({
    drag: function(e, ui) {
        canvasDrawSomethingNearDraggable(ui);
    }
    stop: function(e, ui) {
        canvasDrawSomethingNearDraggable(ui);
    }
});

function canvasDrawRectangleUnderDraggable {
    for (i = 0; i < 10; i++) { // draw overlapping circles in fixed order
        context.beginPath();
        context.arc(x[i], y[i], 10, 0, 2 * Math.PI, false);
        context.fillStyle = c[i];
        context.fill();
        context.stroke();
    }
}

但是当我移动可拖动元素时动画落后（我移动得越快，间隙越大，只有当可拖动的停止事件触发时它才会关闭）：

有没有办法解决或减轻这个问题？我应该计算拖动事件之间的时间，并以这种方式减少对绘图功能的调用，还是有更好的解决方案？

Answer 1

你可能想要去掉你的函数，所以不会经常调用事件处理程序（这会减慢一切）。例如，请参阅Can someone explain the "debounce" function in Javascript。

Underscore库（http://underscorejs.org/#debounce）中提供了去抖动的实现。您只需复制该代码即可在代码中使用。