概念和例子

函數(shù)防抖(debounce)

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

看一個(gè)（栗子）：

//模擬一段ajax請求 function ajax(content) {   console.log('ajax request ' + content) } let inputa = document.getElementById('unDebounce') inputa.addEventListener('keyup', function (e) {     ajax(e.target.value) })

復(fù)制代碼看一下運(yùn)行結(jié)果：

可以看到，我們只要按下鍵盤，就會(huì)觸發(fā)這次ajax請求。不僅從資源上來說是很浪費(fèi)的行為，而且實(shí)際應(yīng)用中，用戶也是輸出完整的字符后，才會(huì)請求。下面我們優(yōu)化一下：

//模擬一段ajax請求 function ajax(content) {   console.log('ajax request ' + content) } function debounce(fun, delay) {     return function (args) {         let that = this         let _args = args         clearTimeout(fun.id)         fun.id = setTimeout(function () {             fun.call(that, _args)         }, delay)     } }      let inputb = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputb.addEventListener('keyup', function (e) {         debounceAjax(e.target.value)     })

復(fù)制代碼看一下運(yùn)行結(jié)果：

可以看到，我們加入了防抖以后，當(dāng)你在頻繁的輸入時(shí)，并不會(huì)發(fā)送請求，只有當(dāng)你在指定間隔內(nèi)沒有輸入時(shí)，才會(huì)執(zhí)行函數(shù)。如果停止輸入但是在指定間隔內(nèi)又輸入，會(huì)重新觸發(fā)計(jì)時(shí)。

再看一個(gè)：

let biu = function () {     console.log('biu biu biu',new Date().Format('HH:mm:ss')) } let boom = function () {     console.log('boom boom boom',new Date().Format('HH:mm:ss')) } setInterval(debounce(biu,500),1000) setInterval(debounce(boom,2000),1000)

復(fù)制代碼看一下運(yùn)行結(jié)果：

這個(gè)就很好的解釋了，如果在時(shí)間間隔內(nèi)執(zhí)行函數(shù)，會(huì)重新觸發(fā)計(jì)時(shí)。biu會(huì)在第一次1.5s執(zhí)行后，每隔1s執(zhí)行一次，而boom一次也不會(huì)執(zhí)行。因?yàn)樗臅r(shí)間間隔是2s，而執(zhí)行時(shí)間是1s，所以每次都會(huì)重新觸發(fā)計(jì)時(shí)

個(gè)人理解 函數(shù)防抖就是法師發(fā)技能的時(shí)候要讀條，技能讀條沒完再按技能就會(huì)重新讀條。

函數(shù)節(jié)流(throttle)

規(guī)定在一個(gè)單位時(shí)間內(nèi)，只能觸發(fā)一次函數(shù)。如果這個(gè)單位時(shí)間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。

看一個(gè)：

function throttle(fun, delay) {         let last, deferTimer         return function (args) {             let that = this             let _args = arguments             let now = +new Date()             if (last && now < last + delay) {                 clearTimeout(deferTimer)                 deferTimer = setTimeout(function () {                     last = now                     fun.apply(that, _args)                 }, delay)             }else {                 last = now                 fun.apply(that,_args)             }         }     }     let throttleAjax = throttle(ajax, 1000)     let inputc = document.getElementById('throttle')     inputc.addEventListener('keyup', function(e) {         throttleAjax(e.target.value)     })

復(fù)制代碼看一下運(yùn)行結(jié)果：

可以看到，我們在不斷輸入時(shí)，ajax會(huì)按照我們設(shè)定的時(shí)間，每1s執(zhí)行一次。

結(jié)合剛剛biubiubiu的：

    let biubiu = function () {         console.log('biu biu biu', new Date().Format('HH:mm:ss'))     }     setInterval(throttle(biubiu,1000),10)

不管我們設(shè)定的執(zhí)行時(shí)間間隔多小，總是1s內(nèi)只執(zhí)行一次。

個(gè)人理解 函數(shù)節(jié)流就是fps游戲的射速，就算一直按著鼠標(biāo)射擊，也只會(huì)在規(guī)定射速內(nèi)射出子彈。

總結(jié)

函數(shù)防抖和函數(shù)節(jié)流都是防止某一時(shí)間頻繁觸發(fā)，但是這兩兄弟之間的原理卻不一樣。

函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次，而函數(shù)節(jié)流是間隔時(shí)間執(zhí)行。

結(jié)合應(yīng)用場景

debounce

search搜索聯(lián)想，用戶在不斷輸入值時(shí)，用防抖來節(jié)約請求資源。

window觸發(fā)resize的時(shí)候，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件，用防抖來讓其只觸發(fā)一次

throttle

鼠標(biāo)不斷點(diǎn)擊觸發(fā)，mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)

監(jiān)聽滾動(dòng)事件，比如是否滑到底部自動(dòng)加載