拖動拖動事件限制

我努力讓自己在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(); 
    } 
}

但動畫滯後當我移動可拖動元素（我將它的差距越大，它關閉，只有當拖動停止事件觸發速度更快）：

enter image description here

是否有解決或減輕這個問題的方法嗎？我是否應該計算拖動事件之間的時間，並以這種方式減少對繪圖函數的調用，還是有更好的解決方案？

來源

2015-07-11 Bob

查看您的canvasDrawSomethingNearDraggable（ui）函數會更容易，但您可能會在可拖動div的子元素上拖動開始時獲得更好的結果繪圖，因此您的畫布會隨之移動。 –

增加了一些非常相似的插圖 – Bob

你可能想要去掉你的函數，這樣事件處理程序不會被太頻繁地調用（這會減慢一切）。例如，請參閱Can someone explain the "debounce" function in Javascript。

在下劃線庫（http://underscorejs.org/#debounce）內可實現去抖動。您可以複製該函數以在您的代碼中使用。

來源

2015-07-11 20:57:40

你的意思是油門，而不是反彈。如果您反彈它，那麼每x毫秒到達一個事件流將不會導致處理程序被調用，直到流停止。 –

拖動拖動事件限制

回答

相關問題