Javascript性能优化之节流函数

在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了

window.addEventListener('scroll',function(){
// 判断滚动条有没有到底部
},false)

看似上面这段代码没有什么问题,然后我们给这段代码再加一段代码看一下

window.addEventListener('scroll',function(){
// 判断滚动条有没有到底部
console.log('aaa')
},false)

 然后我们打开Chrome浏览器控制,测试一下这个滚动事件,其中的回调函数竟然执行了这么多次

Javascript性能优化之节流函数

这就有个问题了,我们需要代码执行的这么频繁吗?

答案肯定是: 不是, 这样写明显很消耗手机性能, 手机电量消耗也会加快,  所以就需要我们就觉这个问题,  那么节流函数就来了

节流函数: 顾名思义就是节省性能的一个函数,他的实现原理就是开启一个定时器,如果在这个定时器的规定范围内,继续触发该函数,则不会这行该定时器中的某些代码,如果超                 出了该定时器的规定范围,才会触发。

是不是很好理解哪?  下面我们修改一下上面的代码

<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>

 

然后再看一下我们的执行结果

Javascript性能优化之节流函数

有没有看到console.log('bbb')执行的次数很少,这样就解决我们的一个性能问题,是不是很简单!!!

节流函数不光在上拉加载的应用场景中使用, window.onresize 事件中同样适用,很简单,希望大家在以后的工作中可以大胆应用

上一篇:ubuntu中python3.4安装pip


下一篇:Loj 3058. 「HNOI2019」白兔之舞