其實函式節流也用了很久了,今天簡單聊聊它的實現原理,目的和使用方法.給初學者一點參考.

      函式節流的目的:  對高頻率事件做做次數限制.比如onmousewheel,注意是對函式的執行次數進行的節流限制.因為高頻率事件會頻繁操作dom.開銷很大.所以用它節省瀏覽器的效能開銷.以實現效能優化的目的.

     函式節流的原理:  其實很簡單,就是把需要執行的函式放在一個延時器裡.讓它延時執行.其實就是讓它只執行最後一次.下面會詳細說一下.

     函式節流的使用方法:

                 比如我們現在有一個需求,需要scrollTop值大於1000的時候,左邊出現一個紅色長方形.那程式碼應該這麼寫:

document.body.onscroll = function() {
				if(document.documentElement.scrollTop >= 1000) {
					animate($nav, {opacity: 1}, 1000, function() {
					console.log(123);
				});
				}
			};

//  當然nav是默認不出現的.當scrolltop大於1000的時候.讓nav出現;

          第一張圖是圖形剛剛出現的時候,我就停止滾輪滾動了.但就是這樣,因為是高頻率事件.還執行了32次.

        第二張圖是圖形出現之後,我又隨便上下滾動了幾次滾輪.函式竟然又瘋狂的執行到了138次.  其實我們的需求是scrolltop大於1000的時候圖形出現.也就是說圖形出現之後,我們的目的就達到了.就不需要這個函式執行了.所以往後的100多次沒有必要執行.這個函式只執行一次我們的目的就達到了.那現在問題來了,要怎麼節流呢?

         先上程式碼吧:

                var timer = null;
			function show() {
				animate($nav, {opacity: 1}, 1000, function() {
					console.log(123);
				});
			}
			document.body.onscroll = function() {
				// 判斷 scrollTop值如果大於1000 就讓#nav出現
				if(document.documentElement.scrollTop >= 1000) {
					// 在高頻率事件中 想要執行一段程式碼 必須使用節流器 
					// 因為這些程式碼只需要執行一次就可以 不必多次執行
					// 先清除延時器 
					clearTimeout(timer);
					// 再賦值
					timer = setTimeout(function() {
						show();
					}, 200);
				}
			}
 

        其實就是把我們需要執行的程式碼放到一個函式show裡面,然後事件觸發的時候,延時執行show這個函式. 我們設定的延時事件是200毫秒.也就是說當觸發onscroll事件的時候,就延遲200ms執行show這個函式.假如在延時這200毫秒內又觸發onscroll事件.那就清除延時器,再設一個新的延時器.如此往復.直到滾輪不再滾動的時候,這時候就沒有新的延時器產生了.所以show函式在200毫秒後會順利執行.  也就是說,如果你一直滾動滾輪  show函式是不執行的.你什麼時候停止,什麼時候執行最後一次.就是這樣.