可拖动拖动事件节流

Question

我正在尝试在 html5 canvas 上制作一个动画，该动画应该在移动时跟随可拖动的 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

您可能希望对函数进行反跳操作，以便事件处理程序不会被频繁调用（这会减慢一切速度）。例如，请参阅有人可以解释 Javascript 中的“debounce”函数吗？

Underscore 库 ( http://underscorejs.org/#debounce )中提供了 debounce 的实现。您只需复制该函数即可在代码中使用。