Bisschen anschaulicher erklärt:
1 . Server-Wert = 80 und wird empfangen
1 . Zeitgleich wird Slider auf Lokal-Wert = 30 gesetzt und an den Server gesendet
2 . jetzt wird der empfangene Wert (80) auf den Slider übertragen
2 . Änderung des Sliders --> Sende Wert 80 an Server
3 . Zeitgleich wird der vorherige Wert (30) empfangen und wieder auf Slider übertragen
4 . Änderung führt wieder zum Senden an Server
5 . und das geht dann ewig

Beide Seiten kämpfen richtig darum, ihren eigenen Wert durchzudrücken und dabei tauschen sie dann immer nur die jeweiligen Werte zyklisch aus.

Bis jetzt das Grundgerüst. Wenn die Verbindung erstmal vernünftig funktioniert, ist der Rest einfach:

Aktueller Code.
Wenn servConn() ein Update bekommt, werden die States emitted. Der nächste Abschnitt ist der Event Listener, der auf dieses Update hört, alle HTML Elemente mit der Klasse .iobroker-state sucht und je nach Typ (bis jetzt Toggle oder Slider) dann die entsprechenden Werte aus dem Array States setzt. Die HTML-Elemente haben noch ein Tag data-id="Shelly.blabla" über die ich dann die richtigen Werte aus dem Array zuordne.
Der letzte Abschnitt achtet auf alle Elemente mit der Klasse .iobroker-state und bei einer Änderung wird wieder nach Typ unterschieden und dann mit der entsprechenden ID der neue Wert an den Server gesendet.

var states = [];
servConn.init({
  
  onUpdate: function (id, state) {
      setTimeout(function () {
        states[id] = state;
        app.emit('smarthomeStates', states);
      }, 0);
    },
  [...]
});


// RECEIVE states and update
app.on('smarthomeStates', function (states) {
  elements = document.getElementsByClassName("iobroker-state")

  for(var i = 0; i < elements.length; i++) {
    if ((elements[i].classList).contains("toggle")) {
      app.toggle.get(elements[i]).checked = states[elements[i].dataset.id]["val"];

    } else if ((elements[i].classList).contains("range-slider")) {
      app.range.get(elements[i]).setValue(states[elements[i].dataset.id]["val"]);
    }
  }
});


// TRANSMIT states on change
// erst wenn Änderung abgeschlossen wurde, also nicht kontinuierlich senden, während man den Slider noch verschiebt
$('.iobroker-state').on('touchend mouseleave', function (e) {
  if ((e.srcElement.classList).contains("toggle")) {
    var toggle = app.toggle.get(e.target);
    servConn.setState(e.srcElement.dataset.id, toggle.checked)
  
  } else if ((e.srcElement.classList).contains("range-slider")) {
    var range = app.range.get(e.target);
    servConn.setState(e.srcElement.dataset.id, range.value)
  }

});

Wie wird das bei VIS gehandhabt bzw. wie kann ich verhindern, dass Client und Server sich darum prügeln, immer den aktuellen Wert an den jeweils anderen zu senden?