最近在学习慕课网一门课程，里面需要实现一个上拉加载更多的功能，最常见的做法就是监听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)
|