联动滚动功能卡顿问题

Matthew.Xue

我有这么一个下拉数据滚动功能，现在遇到一个问题就是联动下拉比较卡顿，对比不联动下拉的情况确实有性能差异。
我用的是vue2+spreadjs 17.0.2

核心代码如下：

activeSheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
//垂直滚动同步
that.newTopRow = args.newTopRow
let rsheet = that.RightExcelSpread.getSheet(0)
rsheet.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
});
activeSheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
//将显示的sheet1的第一行设置到sheet2(垂直滚动同步)
// sheet2.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
that.newTopRow = args.newTopRow
let lsheet = that.LeftExcelSpread.getSheet(0)
lsheet.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
});

复制代码

模板在附件中，请帮忙看下

Matthew.Xue · Matthew.Xue

您好，showRow这个函数本身的性能就比较差，而滚动的监听会频繁触发，showRow又会触发另一个sheet的滚动监听，所以会导致卡顿。
建议您采用类似防抖的方式来实现联动滚动的效果，减少showRow的调用次数，这样可以显著改善卡顿的情况，参考代码如下：

let leftSheet = leftSpread.getSheetFromName("Left")
let rightSheet = rightSpread.getSheetFromName("Right")
let leftTimer, rightTimer
let time = 50
leftSheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
clearTimeout(leftTimer)
leftTimer = setTimeout(() => {
rightSheet.suspendEvent()
rightSheet.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
rightSheet.resumeEvent()
}, time);
});
rightSheet.bind(GC.Spread.Sheets.Events.TopRowChanged, function (sender, args) {
clearTimeout(rightTimer)
rightTimer = setTimeout(() => {
leftSheet.suspendEvent()
leftSheet.showRow(args.newTopRow, GC.Spread.Sheets.VerticalPosition.top);
leftSheet.resumeEvent()
}, time);
});

复制代码

潘嗒嗒 · 潘嗒嗒

Matthew.Xue 发表于 2025-3-10 14:52
您好，showRow这个函数本身的性能就比较差，而滚动的监听会频繁触发，showRow又会触发另一个sheet的滚动监 ...

好的明白，确实有很明显的改善，因为有防抖的原因另外一个sheet会一瞬明显的停顿

Matthew.Xue · Matthew.Xue

潘嗒嗒发表于 2025-3-10 15:35
好的明白，确实有很明显的改善，因为有防抖的原因另外一个sheet会一瞬明显的停顿

是的，您也可以改成节流，每500毫秒更新一次另一个sheet的滚动位置，但是实时显示肯定是会卡顿的。

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

[已处理] 联动滚动功能卡顿问题