前言

據(jù)說阿里有一道面試題就是談?wù)?strong>函數(shù)節(jié)流和函數(shù)防抖。 糟了，這可觸碰到我的知識盲區(qū)了，好像聽也沒聽過這2個(gè)東西，痛定思痛，趕緊學(xué)習(xí)學(xué)習(xí)。here we go！

概念和例子

函數(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)})

看一下運(yùn)行結(jié)果：

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

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

看一下運(yùn)行結(jié)果：

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

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

函數(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) })

看一下運(yùn)行結(jié)果：

可以看到，我們在不斷輸入時(shí)，ajax會按照我們設(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)射擊，也只會在規(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)整瀏覽器窗口大小會不斷的觸發(fā)這個(gè)事件，用防抖來讓其只觸發(fā)一次
• throttle
• 鼠標(biāo)不斷點(diǎn)擊觸發(fā)，mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)
• 監(jiān)聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷

作者：薄荷前端

鏈接：https://juejin.im/post/5b8de829f265da43623c4261

關(guān)注我的公眾號：前端冒險(xiǎn)指南，獲取更多資訊

總結(jié)

以上是生活随笔為你收集整理的场景理解_7分钟理解JS的节流、防抖及使用场景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。