EasyGBS实时调阅侧边栏在数据很多的情况下无法加载的优化

为了方便用户对通道的归类管理和筛选，EasyNVR、EasyGBS等平台的实时调阅页面设立了树状图分组，且同时具有云台控制、语音对讲功能。

我们在进行新版本测试的时候，发现侧边栏是循环渲染只请求一次，但返回数据过多，导致系统运行符合较大，于是在新版本更新当中就把这个问题进行了优化。

因此我们设置了一个时间函数去请求数据，代码如下：

 setInterval(() => {
          
          $.get("/api/v1/device/info", {
            serial: node.key,
            start:a*50,
            limit:50,
        }).then((ret) => {
          if(ret.ChannelList.length == 0){
            // console.log('没数据');
            // clearInterval(time)
          }
          for (const i in ret.ChannelList) {
            // if(ret.ChannelList[i].ParentID==node.key){
            let arr = {};
            arr.Name =
              ret.ChannelList[i].Name == ""
                ? ret.ChannelList[i].ID
                : ret.ChannelList[i].Name;
            arr.DeviceID = ret.ChannelList[i].DeviceID;
            arr.id = ret.ChannelList[i].ID;
            arr.ID = ret.ChannelList[i].ID;
            arr.online =
              ret.ChannelList[i].Status == "ON" &&
              ret.ChannelList[i].SubCount == 0
                ? true
                : false;
            arr.snapUrl = ret.ChannelList[i].SnapURL;
            arr.leaf = ret.ChannelList[i].SubCount == 0;
            arr.SubCount = ret.ChannelList[i].SubCount;
            arr.Type = 2;
            arr.rank = 3;
            aa.push(arr);
          }
          a++
          return resolve(aa);
        });
        }, 100);

 

但是如上设置会导致分组不能关闭的情况，于是我们又对该行代码进行分析，得知是因为不断往数组里添加空数据导致的，因此再增加一层代码，判断请求为空数据的时候就停止请求。

最终的预览如下：