概念
函數(shù)防抖（debounce）
函數(shù)防抖苛让，就是指觸發(fā)事件后在 n 秒內(nèi)函數(shù)只能執(zhí)行一次火惊，如果在 n 秒內(nèi)又觸發(fā)了事件，則會(huì)重新計(jì)算函數(shù)執(zhí)行時(shí)間累贤。
簡(jiǎn)單的說(shuō)叠穆，當(dāng)一個(gè)動(dòng)作連續(xù)觸發(fā)，則只執(zhí)行最后一次臼膏。
打個(gè)比方硼被，坐公交，司機(jī)需要等最后一個(gè)人進(jìn)入才能關(guān)門(mén)渗磅。每次進(jìn)入一個(gè)人嚷硫，司機(jī)就會(huì)多等待幾秒再關(guān)門(mén)。
函數(shù)節(jié)流（throttle）
限制一個(gè)函數(shù)在一定時(shí)間內(nèi)只能執(zhí)行一次始鱼。
舉個(gè)例子仔掸，乘坐地鐵，過(guò)閘機(jī)時(shí)医清，每個(gè)人進(jìn)入后3秒后門(mén)關(guān)閉起暮，等待下一個(gè)人進(jìn)入。
為了方便理解会烙，我們首先通過(guò)一個(gè)可視化的工具负懦，感受一下三種環(huán)境（正常情況、函數(shù)防抖情況 debounce柏腻、函數(shù)節(jié)流 throttle）下密似，對(duì)于mousemove事件回調(diào)的執(zhí)行情況。
常見(jiàn)應(yīng)用場(chǎng)景
函數(shù)防抖的應(yīng)用場(chǎng)景
連續(xù)的事件葫盼，只需觸發(fā)一次回調(diào)的場(chǎng)景有：
搜索框搜索輸入。只需用戶最后一次輸入完村斟，再發(fā)送請(qǐng)求
手機(jī)號(hào)贫导、郵箱驗(yàn)證輸入檢測(cè)
窗口大小Resize抛猫。只需窗口調(diào)整完成后，計(jì)算窗口大小孩灯。防止重復(fù)渲染闺金。
函數(shù)節(jié)流的應(yīng)用場(chǎng)景
間隔一段時(shí)間執(zhí)行一次回調(diào)的場(chǎng)景有：
滾動(dòng)加載，加載更多或滾到底部監(jiān)聽(tīng)
谷歌搜索框峰档，搜索聯(lián)想功能
高頻點(diǎn)擊提交败匹，表單重復(fù)提交
異同比較
相同點(diǎn)：
都可以通過(guò)使用setTimeout實(shí)現(xiàn)。
目的都是讥巡，降低回調(diào)執(zhí)行頻率掀亩。節(jié)省計(jì)算資源。
不同點(diǎn)：
函數(shù)防抖欢顷，在一段連續(xù)操作結(jié)束后槽棍，處理回調(diào)，利用 clearTimeout 和 setTimeout 實(shí)現(xiàn)抬驴。函數(shù)節(jié)流炼七，在一段連續(xù)操作中，每一段時(shí)間只執(zhí)行一次布持，頻率較高的事件中使用來(lái)提高性能豌拙。
函數(shù)防抖關(guān)注一定時(shí)間連續(xù)觸發(fā)，只在最后執(zhí)行一次题暖，而函數(shù)節(jié)流側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次按傅。
總結(jié)
最后，總結(jié)一下函數(shù)防抖與函數(shù)節(jié)流的區(qū)別芙委。函數(shù)防抖逞敷，將多次執(zhí)行的事件合并成一次。函數(shù)節(jié)流灌侣，保持一段時(shí)間執(zhí)行一次推捐。推薦閱讀「涂鴉碼龍」翻譯的這篇 - 實(shí)例解析防抖動(dòng)（Debouncing）和節(jié)流閥（Throttling），加深理解侧啼。文章豐富的實(shí)例牛柒，可深刻感受一下兩者的區(qū)別。
在不是很理解debounce的API的情況下痊乾，直接閱讀lodash源碼皮壁，花了2個(gè)晚上看得懂云里霧里。后面哪审，重新閱讀API文檔蛾魄，弄明白了leading和trailing的目的。很快就看懂了debounce的源碼。因此滴须，建議閱讀源碼前舌狗，先理解API中各個(gè)參數(shù)的用處。帶著目的看源碼會(huì)容易一些扔水。
