在我們的工作中往往有這樣的需求，下拉上拉加載實現無限加載列表數據這樣的一個功能，這個時候小夥伴們可能就覺得這個功能幾分鐘的事，於是乎，下邊這段代碼浩浩蕩蕩就出來了

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 事件中同樣適用，很簡單，希望大家在以後的工作中可以大膽應用

Javascript性能優化之節流函數