這里要給大家引入一個(gè)函數(shù)節(jié)流的概念，他的應(yīng)用場景還是十分多的，下面就給大家分別從概念和案例分開介紹，喜歡的話不妨收藏起來。

      什么是節(jié)流？

      幼兒園所有的小朋友每天都要做3件事：吃飯、睡覺、打豆豆。只有一個(gè)小朋友例外，他的名字叫豆豆。后來，有一位善良勇敢的小朋友站出來說：你們不能這樣打他了，這么打下去，會(huì)把他打死的，那我們以后就只能吃飯睡覺了??！所以從現(xiàn)在開始，我們每隔72小時(shí)，只能打1次豆豆，于是大家都紛紛表示贊同并流出了感動(dòng)的淚水。

      豆豆挨打的頻率被降低了，這就叫節(jié)流。

      列舉一個(gè)實(shí)際的應(yīng)用場景

      一般情況下，當(dāng)網(wǎng)頁向下滑動(dòng)的距離越來越長的時(shí)候，在右下角會(huì)出現(xiàn)一個(gè)回到頂部的按鈕。

      它的實(shí)現(xiàn)非常的簡單

      然而你很快就發(fā)現(xiàn)了這段程序的邏輯問題

      那就是，scroll這種滾動(dòng)事件的觸發(fā)頻率是非常高的，只要在頁面上稍微滾動(dòng)一下就會(huì)連續(xù)觸發(fā)十幾甚至二十幾次事件，每一次我們都需要重新計(jì)算頁面滾動(dòng)距離，做判斷，顯示按鈕等操作。

      顯然我們對該事件的觸發(fā)頻率不需要那么高，200ms一次似乎已經(jīng)足夠了。

      于是，我們開始動(dòng)手寫代碼。

      函數(shù)節(jié)流（未優(yōu)化版本）

      如果你仔細(xì)的閱讀了上面的代碼，依然不能理解節(jié)流原理，我還有張?jiān)韴D給你看

      總結(jié)：

      用節(jié)流的方式，可以保證在一段時(shí)間內(nèi)，只有第一次執(zhí)行是生效的，直到超過了設(shè)定的時(shí)間段，才有機(jī)會(huì)執(zhí)行下一次，大大的降低了原有函數(shù)的執(zhí)行頻率，顧名思義，函數(shù)節(jié)流。

      回過頭來，我們再看代碼

      最后，參考函數(shù)防抖，再來做一點(diǎn)優(yōu)化吧

      關(guān)于函數(shù)節(jié)流的應(yīng)用場景，給大家列舉一下，僅供參考

      - DOM 元素的拖拽（mousemove）

      - 射擊游戲在單位時(shí)間只能發(fā)射一顆子彈（mousedown/keydown）

      - Canvas 模擬畫板功能（mousemove）

      - 懶加載，在滾動(dòng)過程中判斷是否需要加載圖片（scroll）

      - 頁面滾動(dòng)到底部加載更多（scroll）

      最后想學(xué)習(xí)web前端的同學(xué)，可以參考千鋒web前端培訓(xùn)班提供的web前端學(xué)習(xí)路線，該學(xué)習(xí)路線對從零基礎(chǔ)小白到web前端初級開發(fā)工程師，web前端高級開發(fā)工程師，后面的web前端大神級開發(fā)工程師都有一個(gè)明確清晰的指導(dǎo)，根據(jù)千鋒web前端培訓(xùn)機(jī)構(gòu)提供的web前端學(xué)習(xí)路線圖可以讓你對學(xué)習(xí)web前端開發(fā)需要掌握的知識有個(gè)清晰的了解，并快速入門web前端開發(fā)。想要獲取前端完整學(xué)習(xí)路線和免費(fèi)的學(xué)習(xí)資料可以添加我們的web前端技術(shù)分享交流qq群：857920838  加群找群管理領(lǐng)取即可，等你來哦~~