场景
我的页面左边是下拉树展示指标结构,右侧根据左边勾选的指标项展示对应的指标echarts图表,且页面整体有定时刷新。
问题
指标勾选过多时定时刷新会重新更新全部的echarts图表数据,非常影响性能,所以考虑给父元素定一个最大高度,通过滚动条滚动展示更多的图表,当图表暴露在父元素视图内定时刷新才会更新数据,隐藏的不更新
方案
- 监听滚动条scroll事件
- IntersectionObserver
通过监听scroll计算的方式计算量太大了,所以我这里选择的是Intersection Observer API
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
代码
useEffect(() => {
const timer = setInterval(() => {
if (targetRef.current) {
const intersectionObserver = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio <= 0) return;
// 更新数据
updateData();
}, { root: moduleBoxRef, rootMargin: '0px 0px 100px 0px' })
}
}, 1000)
return () => {
clearInterval(timer);
}
}, [targetRef, moduleBoxRef,id])
我这里用的react,目前来说时满足我的需求的,仅供参考