防抖的概念

防抖又叫為函數(shù)防抖（debounce）：指觸發(fā)事件后，在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果觸發(fā)事件后在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)延執(zhí)行時(shí)間。

前端開發(fā)中，常見的事件如，onresize，scroll，mousemove?,mousehover?等會(huì)短時(shí)間內(nèi)多次觸發(fā)（頻繁觸發(fā)），不做限制的話可能一秒執(zhí)行幾百次，

在這些函數(shù)內(nèi)部如果還執(zhí)行了其他函數(shù)，尤其是執(zhí)行了操作?dom?的函數(shù)的話（瀏覽器操作 DOM 是很耗費(fèi)性能的），那不僅會(huì)浪費(fèi)計(jì)算機(jī)資源，

還會(huì)降低程序運(yùn)行速度，甚至造成瀏覽器卡死、崩潰。

除此之外，短時(shí)間內(nèi)重復(fù)調(diào)用 ajax 不僅會(huì)造成數(shù)據(jù)關(guān)系的混亂，還會(huì)造成網(wǎng)絡(luò)擁堵，增加服務(wù)器壓力等問題。

防抖代碼實(shí)現(xiàn)

防抖的關(guān)鍵是需要一個(gè)?setTimeout?來輔助實(shí)現(xiàn)，延遲運(yùn)行需要執(zhí)行的代碼。

如果方法多次觸發(fā)，則把上次記錄的延遲執(zhí)行代碼用?clearTimeout?清掉，重新開始計(jì)時(shí)。

若計(jì)時(shí)期間事件沒有被重新觸發(fā)，等延遲時(shí)間計(jì)時(shí)完畢，則執(zhí)行目標(biāo)代碼。

注意：當(dāng)你一直連續(xù)不斷的點(diǎn)擊超過你設(shè)置的時(shí)間，并且只有第一次點(diǎn)擊有效，這不是bug，這是概念問題，注意看下面標(biāo)紅這部分，

防抖又叫為函數(shù)防抖（debounce）：指觸發(fā)事件后，在 n 秒內(nèi)函數(shù)只能執(zhí)行一次，如果觸發(fā)事件后在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)延執(zhí)行時(shí)間。

節(jié)流的概念

節(jié)流又叫函數(shù)節(jié)流（throttle）：指當(dāng)持續(xù)觸發(fā)事件時(shí)，保證一定時(shí)間段內(nèi)只調(diào)用一次事件處理函數(shù)。

節(jié)流代碼實(shí)現(xiàn)

• 鼠標(biāo)連續(xù)不斷地觸發(fā)某事件（如點(diǎn)擊），只在單位時(shí)間內(nèi)只觸發(fā)一次；

• 在頁面的無限加載場(chǎng)景下，需要用戶在滾動(dòng)頁面時(shí)，每隔一段時(shí)間發(fā)一次 ajax 請(qǐng)求，而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù)；

• 監(jiān)聽滾動(dòng)事件，比如是否滑到底部自動(dòng)加載更多，用throttle來判斷；

節(jié)流和防抖都是差不多的，區(qū)別在于是“立即執(zhí)行版” 和 “非立即執(zhí)行版”?

防抖和節(jié)流的區(qū)別

函數(shù)防抖：是n秒內(nèi)只執(zhí)行一次，如果觸發(fā)事件后在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)延執(zhí)行時(shí)間。

函數(shù)節(jié)流：是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。

原理：

防抖是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，都會(huì)清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用，即重新計(jì)時(shí)。這樣一來，只有最后一次操作能被觸發(fā)。

節(jié)流是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)，若沒到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器。

總結(jié)

函數(shù)防抖和節(jié)流的實(shí)現(xiàn)很簡(jiǎn)單，能很友好的解決前端開發(fā)過程中的遇到的很多問題，提升性能，優(yōu)化用戶體驗(yàn)。在實(shí)際的開發(fā)中，防抖函數(shù)還是節(jié)流函數(shù)的選擇需要開發(fā)者針對(duì)不同的應(yīng)用場(chǎng)景進(jìn)行相應(yīng)的應(yīng)用。