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

Richard.Ma

我一个页面上两个 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');
  }

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

Richard.Ma · Richard.Ma

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

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2023-3-20 14:30 编辑

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

前端小菜鸟 · 前端小菜鸟

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

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

前端小菜鸟 · 前端小菜鸟

本帖最后由前端小菜鸟于 2023-3-20 14:39 编辑

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

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

Richard.Ma · Richard.Ma

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

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

前端小菜鸟 · 前端小菜鸟

本帖最后由前端小菜鸟于 2023-3-20 16:34 编辑

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");

      }
   });
}

Richard.Ma · Richard.Ma

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

前端小菜鸟 · 前端小菜鸟

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

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

前端小菜鸟 · 前端小菜鸟

问题解决了

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

  //加载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();

  }

		自动登录	找回密码
密码			立即注册

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

最佳答案

10 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人