列表数据频繁闪烁?

作者站长头像
站长
· 阅读数 8
 const onMessage = async (event) => {
    const data = JSON.parse(event.data);
    if (data.data == undefined) {
      console.log('未响应');
    } else {
      console.log(data.data);
      if (data.data.state !== undefined) {
        // 查找是否存在相同uid的数据
        const existingDataIndex = TagInfoData.value.findIndex(item => item.uid === data.data.uid);
        if (existingDataIndex !== -1) {
          // 如果uid已存在,更新对应的数据
          const existingData = TagInfoData.value[existingDataIndex];
          existingData.frequency = data.data.frequency; // 更新frequency字段
          existingData.state = data.data.state
        } else {
          // 如果uid不存在,新增一行数据
          TagInfoData.value.push({
            uid: data.data.uid,
            angle: 0,
            height: 0,
            confi: 0,
            longitude: 0,
            latitude: 0,
            speed: 0,
            state: 0,
            frequency: data.data.frequency
          });
        }
      } else {
        const targetingTypes = {
          0x10: 'RTK',
          0x11: 'UWB',
          0x12: '融合'
        };
        // 查找是否存在相同uid的数据
        const existingDataIndex = TagInfoData.value.findIndex(item => item.uid === data.data.uid);
        if (existingDataIndex !== -1) {
          // 如果uid已存在,更新对应的数据
          const existingData = TagInfoData.value[existingDataIndex];
          existingData.TargetingType = targetingTypes[data.data.type];
          existingData.uid = data.data.uid;
          existingData.angle = data.data.angle;
          existingData.height = data.data.height;
          existingData.confi = data.data.confi;
          existingData.longitude = data.data.longitude;
          existingData.latitude = data.data.latitude;
          existingData.speed = data.data.speed;
          existingData.frequency = frequencyData.value; // 将frequency字段设置为frequencyData的值
        } else {
          // 如果uid不存在,新增一行数据
          TagInfoData.value.push({
            TargetingType: targetingTypes[data.data.type],
            uid: data.data.uid,
            angle: data.data.angle,
            height: data.data.height,
            confi: data.data.confi,
            longitude: data.data.longitude,
            latitude: data.data.latitude,
            speed: data.data.speed,
            frequency: frequencyData.value
          });
        }
      }
    }
  };

列表数据频繁闪烁?通过websocket实时发送的数据,上述代码的实现会使定位频率(frequency)字段频繁闪烁,大佬们帮忙看看如何解决呢?谢谢

回复
1个回答
avatar
test
2024-06-27

数据只在实际变了的时候再改:

const onMessage = async (event) => {
  const data = JSON.parse(event.data);
  if (data.data == undefined) {
    console.log('未响应');
    return;
  }

  const targetingTypes = {
    0x10: 'RTK',
    0x11: 'UWB',
    0x12: '融合'
  };

  const existingDataIndex = TagInfoData.value.findIndex(item => item.uid === data.data.uid);
  let existingData;

  if (existingDataIndex !== -1) {

    existingData = TagInfoData.value[existingDataIndex];
  } else {

    existingData = {
      uid: data.data.uid,
      angle: 0,
      height: 0,
      confi: 0,
      longitude: 0,
      latitude: 0,
      speed: 0,
      state: 0,
      frequency: 0
    };
    TagInfoData.value.push(existingData);
  }

  if (data.data.state !== undefined) {
    existingData.frequency = data.data.frequency; 
    existingData.state = data.data.state;
  } else {
    existingData.TargetingType = targetingTypes[data.data.type];
    existingData.angle = data.data.angle;
    existingData.height = data.data.height;
    existingData.confi = data.data.confi;
    existingData.longitude = data.data.longitude;
    existingData.latitude = data.data.latitude;
    existingData.speed = data.data.speed;
    existingData.frequency = frequencyData.value; 
  }
};
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容