Javascript性能优化之节流函数

Posted 2020-09-19

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

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 事件中同样适用，很简单，希望大家在以后的工作中可以大胆应用