14 两个spread 在同一个页面，同时加载，效果上是先后加载的是什么问题？

我一个页面上 两个 div spread

init的时候  是同时加载

initExcel(){
    document.getElementById("ss1").innerHTML = "";
      document.getElementById("ss2").innerHTML = "";
      this.spread_l = new GC.Spread.Sheets.Workbook(document.getElementById("ss1"));
      this.spread_r = new GC.Spread.Sheets.Workbook(document.getElementById("ss2"));
      this.spread_l.options.scrollbarMaxAlign = true;
      this.spread_l.options.tabStripVisible = false;
      this.spread_r.options.scrollbarMaxAlign = true;
      this.spread_r.options.tabStripVisible = false;

      this.LoadList( this.spread_l,'left');
      this.LoadList( this.spread_r,'right');
  }

为什么展示效果是左边数据加载完之后 右边才开始加载的感觉

好的，问题解决就好

问题解决了

换了种写法就可以了，不清楚什么原因。


  //加载excle
  async LoadList(spread,type){
    spread.fromJSON(JSON.parse(null));
    let sheet = spread.getActiveSheet();
    sheet.suspendPaint();
    sheet.options.protectionOptions = this.option;
    sheet.options.isProtected = true;

    this.setExcelHead(sheet,type);//绑定表头
    if(type=='left'){
      await this.getDataLeft();
      this.setData(sheet,type,this.dataLeft);
    }else{
      await this.getDataRight();
      this.setData(sheet,type,this.dataRight);
    }
   
    this.bindOpenEvent(sheet,type);//表格点击事件

    sheet.resumePaint();
   
  }

Richard.Ma 发表于 2023-3-20 18:26
看到你这边的代码还涉及了获取后端的数据。从你的代码确实 没法直接判断原因。
建议你可以先排除后端影响 ...

您好，应该是和接口没关系的，因为即便我换成了两边都调同一个接口，还是会出现一模一样的问题。

看到你这边的代码还涉及了获取后端的数据。从你的代码确实 没法直接判断原因。
建议你可以先排除后端影响，比如给左右都提供一个本地的json数据
如果还有问题需要我们排查，请上传一个能重现问题的demo。

Richard.Ma 发表于 2023-3-20 14:49
所以具体的原因不好判断，只能猜测是你可能做了导入文件的操作，而且使用了incrementalLoad，增量加载时， ...

现在是这样的
我的this.setData(sheet,'left',res.data); 方法 可能执行时间比较长 大概十几秒
现在感觉影响了我右侧接口的响应速度
我设置了 开始时间和结束时间  开始的时间 基本相同


开始时间Mon Mar 20 2023 16:25:20 GMT+0800 (中国标准时间)ms
开始时间Mon Mar 20 2023 16:25:21 GMT+0800 (中国标准时间)ms


结束时间Mon Mar 20 2023 16:25:21 GMT+0800 (中国标准时间)ms
结束时间Mon Mar 20 2023 16:25:38 GMT+0800 (中国标准时间)ms
结束时间相差十几秒
但是通过 浏览器的time 看两个接口的响应时间都不超过一秒钟

LoadList(spread,type){

    spread.fromJSON(JSON.parse(null));
    let sheet = spread.getActiveSheet();
    sheet.suspendPaint();
    sheet.options.protectionOptions = this.option;
    sheet.options.isProtected = true;

    this.setExcelHead(sheet,type);//绑定表头

    if(type=='left'){
      var beginTimeJRleft = new Date();
      console.log('开始时间'+beginTimeJRleft+"ms");
      this.http.post(global.host_b + '/Left').subscribe((res: any) => {
        if (res.success != true) {
          this.msg.error(res.msg);
          this.loadingLeft = false;
        } else {
          let endTime = new Date();
          console.log('结束时间'+endTime+"ms");
          // var beginTime = new Date();
          // console.log('开始时间'+beginTime+"ms");

          // console.time("setData----left");
          this.setData(sheet,'left',res.data);
          // console.timeEnd("setData----left");

          // var endTime = new Date();
          // console.log('结束时间'+endTime+"ms");

        }
      });
    }else{
      var beginTimeJRRight = new Date();
      console.log('开始时间'+beginTimeJRRight+"ms");
      this.http.get(global.host_b + '/Right').subscribe((res: any) => {
        if (res.success != true) {
          this.msg.error(res.msg);
          this.loadingRight = false;
        } else {

          let endTime = new Date();
          console.log('结束时间'+endTime+"ms");

          // let beginTime = new Date();
          // console.log('开始时间'+beginTime+"ms");

          // console.time("setData----right");
          this.setData(sheet,'right',res.data);
          // console.timeEnd("setData----right");

          // let endTime = new Date();
          // console.log('结束时间'+endTime+"ms");

        }
      });
    }

所以具体的原因不好判断，只能猜测是你可能做了导入文件的操作，而且使用了incrementalLoad，增量加载时，先加载的部分会被先显示出来

如果需要我们具体排查，可以上传一个重现问题的demo

Richard.Ma 发表于 2023-3-20 14:23
LoadList中具体执行的是什么代码呢？，理论上来说应该是你这些代码全部执行完，整个页面才会都统一加载出来 ...

下面是我左右两边塞入值的时间戳
从时间上感觉差异不大，但是页面展示上就是 左边都展示完了 右边还是空白 大概还要等一半的时间 右边再全部展示出来
搞得一个页面全部显示完要半分钟的时间

Richard.Ma 发表于 2023-3-20 14:23
LoadList中具体执行的是什么代码呢？

load里面的处理还是比较复杂的  但是 由于左右显示样式基本一致 就是调的接口不一样

LoadList中具体执行的是什么代码呢？，理论上来说应该是你这些代码全部执行完，整个页面才会都统一加载出来的

前后端通信一般是异步的，我不确定你那边项目具体是什么情况，所以还是建议你给左右都先提供一个本地的json数据测试一下
如果需要我们排查，请上传一个能重现问题的demo。否则我们也没法确认具体是什么原因。