Firebase sync causes lag

Question

I am working on a project in which I use Polymer in combination with Firebase. I have a control that is only a handle whose value is stored in Firebase. The handle value is observed by the polymer observer, which, when the value changes, updates the firebase value.

The problem is this: when the value changes in one place, it updates the firebase value. This emits a change event to all other places. In other places, this makes a value in the given element and, therefore, the observer is launched. This observer forces the fire base value to be set again. This, in turn, again emits changes, etc. This causes lag behavior when adapting the handle. What can I do?

<script> Polymer({ is: 'disco-ccontrol', properties: { midiValue: { type: Number, value: 0, observer: '_valueChanged', notify: true }, channel: { type: Number, value: 0 }, channelNumber: { type: Number, value: 0 }, ref: { type: Object, computed: '_computeRef(channel, channelNumber)' } }, _computeRef: function(channel, channelNumber) { var ref = new Firebase("https://incandescent-inferno-8405.firebaseio.com/user/"+this.channel+'/'+this.channelNumber); ref.on("child_changed", function(data) { this.midiValue = data.val(); }.bind(this)); return ref; }, _valueChanged: function() { var message = { value: this.midiValue, channel: this.channel, channelNumber: this.channelNumber }; if (this.ref) { this.ref.set(message); } } }); </script> 

Answer 1

What about

 ref.on("child_changed", function(data) { 

you are using

 ref.once("child_changed", function(data) { 

to get the value only from firebase at startup, and after that you only update the value in firebase.

Of course, it depends on your overall application architecture, but what you show here seems fine.