带滚动条的图文列表局部刷新

场景

我的页面左边是下拉树展示指标结构，右侧根据左边勾选的指标项展示对应的指标echarts图表，且页面整体有定时刷新。

问题

指标勾选过多时定时刷新会重新更新全部的echarts图表数据，非常影响性能，所以考虑给父元素定一个最大高度，通过滚动条滚动展示更多的图表，当图表暴露在父元素视图内定时刷新才会更新数据，隐藏的不更新

方案

1. 监听滚动条scroll事件
2. 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，目前来说时满足我的需求的，仅供参考