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 事件中一樣適用，很簡單，但願你們在之後的工做中能夠大膽應用