Draggable controls raise an interesting challenge when Backbone.Views share a common model.

Such controls include colorpickers, slides, and positionable elements. When users move around a color wheel or acutely adjust the position of an element, change events should trigger to let other components know their portion of the interface needs updating.

For this to happen, the browser's data layer must update immediately. But how does the application know when to pass the torch to the database?

Requesting to persist data on every pixel deviation can be disastrous. When a user wants the perfect shade of yellow, there's nothing like a torrent of PUT requests to dampen their mood.

To illustrate:

Not exactly performant. Fortunately UnderscoreJS provides a great toolset for tackling exactly this problem.

Only you can prevent forest-fires, by debouncing

UnderscoreJS's debounce method is particularly well suited for our use case: it postpones invocation of a function until a specified expiration time that resets on every function call. This can be used to bundle together Backbone.sync executions from the same source, significantly lowering requests without nasty side effects.

Update: Originally I handled debouncing directly within the sync method of the Backbone.Model , however a sharp commenter has suggested a more optimal solution by moving this functionality into the Backbone.View that oversees the input.