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

      什么是節(jié)流？

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

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

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

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

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

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

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

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

      于是，我們開始動手寫代碼。

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

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

      總結(jié)：

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

      回過頭來，我們再看代碼

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

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

      - DOM 元素的拖拽（mousemove）

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

      - Canvas 模擬畫板功能（mousemove）

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

      - 頁面滾動到底部加載更多（scroll）

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