在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了
window.addEventListener('scroll',function(){
// 判断滚动条有没有到底部
},false)
看似上面这段代码没有什么问题,然后我们给这段代码再加一段代码看一下
window.addEventListener('scroll',function(){
// 判断滚动条有没有到底部
console.log('aaa')
},false)
然后我们打开Chrome浏览器控制,测试一下这个滚动事件,其中的回调函数竟然执行了这么多次
这就有个问题了,我们需要代码执行的这么频繁吗?
答案肯定是: 不是, 这样写明显很消耗手机性能, 手机电量消耗也会加快, 所以就需要我们就觉这个问题, 那么节流函数就来了
节流函数: 顾名思义就是节省性能的一个函数,他的实现原理就是开启一个定时器,如果在这个定时器的规定范围内,继续触发该函数,则不会这行该定时器中的某些代码,如果超 出了该定时器的规定范围,才会触发。
是不是很好理解哪? 下面我们修改一下上面的代码
<script type="text/javascript">
var timer = null
window.addEventListener('scroll',function(){
// 判断滚动条有没有到底部
clearTimeout(timer)
timer = setTimeout(function(){
console.log('bbb')
},50)
console.log('aaa')
},false)
</script>
然后再看一下我们的执行结果
有没有看到console.log('bbb')执行的次数很少,这样就解决我们的一个性能问题,是不是很简单!!!
节流函数不光在上拉加载的应用场景中使用, window.onresize 事件中同样适用,很简单,希望大家在以后的工作中可以大胆应用