我试图在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();
}
}
但是当我移动可拖动元素时动画落后（我移动得越快，间隙越大，只有当可拖动的停止事件触发时它才会关闭）：
有没有办法解决或减轻这个问题？我应该计算拖动事件之间的时间并以这种方式减少对绘图功能的调用，还是有更好的解决方案？
1 回答
你可能想要去掉你的函数，所以事件处理程序不会被频繁调用（这会减慢一切） . 例如，请参见Can someone explain the "debounce" function in Javascript .
在Underscore库（http://underscorejs.org/#debounce）中可以实现去抖动 . 您只需复制该函数即可在代码中使用 .