Javascript性能优化之节流函数

在咱们的工做中每每有这样的需求，下拉上拉加载实现无限加载列表数据这样的一个功能，这个时候小伙伴们可能就以为这个功能几分钟的事，因而乎，下边这段代码浩浩荡荡就出来了

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 事件中一样适用，很简单，但愿你们在之后的工做中能够大胆应用