JavaScript 节流

发表于 | 更新于 | 分类于

最近在学习慕课网一门课程，里面需要实现一个上拉加载更多的功能，最常见的做法就是监听scroll事件，比较滚动距离和窗口高度。于是代码是这样的：

1
2
3
4
5
6
7
8
function callback(){
	const top = wrapper.getBoundingClientRect().top
	const windowHeight = window.screen.height
	if(top && top < windowHeight){
		loadMoreFn()
	}
}
window.addEventListener('scroll',callback.bind(this),false)

此时有一个问题就是，每次滚动都会调用callback，如果callback处理的比较复杂（常见的是导航栏的隐藏和显示）就会对性能和展示造成影响。

解决办法就是声明一个定时器，每次出发事件是就清空老的定时器，然后赋值新的定时器，当滚动结束的时候，定时器中的函数就会执行，时间间隔设置比较小，就不会造成明显的延时。
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let timeoutId
function callback(){
	const top = wrapper.getBoundingClientRect().top
	const windowHeight = window.screen.height
	if(top && top < windowHeight){
		loadMoreFn()
	}
}
window.addEventListener('scroll',function(){
	if(timeoutId){
		clearTimeout(timeoutId)
	}
	timeoutId = setTimeout(callback,50)

}.bind(this),false)

0%