1

我正在开发一个 Web 应用程序来使用 openHab API 和使用 SSE 来控制一些灯光，但是当灯光亮起时，我同时收到 3 条消息

一个值为 100，另外两个相同的消息为灯光的实际值（例如 45） 该值对应于灯光亮度的百分比

eventSource.onmessage = (event: any) => {
      this.val = JSON.parse(JSON.parse(event.data).payload).value;
      console.log("new val " + this.val);
      slid.value = this.val;
      if(this.val >= 1){
        this.light = true;
        button.checked= true;
      }
      else{
        this.light = false;
        button.checked = false;
      }
    };

问题是我的进度条显示灯的位置到 100% 然后下降到它应该的值，我想避免有什么东西可以阻止消息或仅更新最后一条消息的值已收到 ？

谢谢。

4

1 回答 1

0

如果我们假设这是服务器端的错误或网络问题，您可以通过在采取任何操作之前添加 0.1 秒的等待来解决它。那么如果三个消息同时到达，那么只有第 3 个消息会触发任何 UI 更改。大致像这样（未经测试的代码，其中this.light肯定changeUI()需要整理）：

var timer = null;

eventSource.onmessage = (event: any) => {
      this.val = JSON.parse(JSON.parse(event.data).payload).value;
      console.log("new val " + this.val);
      if(timer)clearTimeout(timer);
      timer = setTimeout(changeUI, 100, this.val);
      };

function changeUI(val){
    if(timer){clearTimeout(timer);timer=null;}   //Redundant but harmless
    slid.value = val;
    if(val >= 1){
        this.light = true;
        button.checked= true;
      }
    else{
        this.light = false;
        button.checked = false;
      }
    }
于 2017-08-31T16:01:42.977 回答