【js】簡單理解節(jié)流與防抖，搜索框的場景

在輸入框輸入時(shí)，要搜索某個(gè)字符串，基于性能考慮，肯定不能用戶沒輸入一個(gè)字符就發(fā)送一次搜索請(qǐng)求，一種方法就是等待用戶停止輸入，比如過了500ms用戶都沒有再輸入，那么就搜索此時(shí)的字符串，這就是防抖；節(jié)流比防抖寬松一些，比如我們希望給用戶一些搜索提示，所以在用戶輸入過程中，沒過500ms就查詢一次相關(guān)字符串，這就是節(jié)流。

成都創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注重慶網(wǎng)站建設(shè)公司、網(wǎng)站設(shè)計(jì)，有關(guān)成都定制網(wǎng)頁設(shè)計(jì)方案、改版、費(fèi)用等問題，行業(yè)涉及成都汽車玻璃修復(fù)等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

防抖的實(shí)現(xiàn)思路：每次觸發(fā)事件時(shí)都取消之前的延時(shí)調(diào)用方法：

節(jié)流的實(shí)現(xiàn)思路：每次觸發(fā)事件時(shí)都判斷當(dāng)前是否有等待執(zhí)行的延時(shí)函數(shù)：

JS的防抖和節(jié)流

應(yīng)用場景： input輸入信息進(jìn)行搜索，如果每敲一個(gè)字符就請(qǐng)求后臺(tái)接口，給后臺(tái)的壓力太大了，所以做好防抖，即讓程序只執(zhí)行最后一次的事件。

為解決該問題，探索到了兩個(gè)解決方案：

直接使用lodash工具庫的debounce方法

參考網(wǎng)址：

應(yīng)用場景： 滾輪滾動(dòng)觸發(fā)事件頻繁，加上延遲可低頻觸發(fā)

看過了上面閉包防抖的寫法，下面閉包節(jié)流的寫法也很好理解了~

Js中防抖和節(jié)流的區(qū)別，論如何避免重復(fù)點(diǎn)擊

在進(jìn)行窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)，防止按鈕重復(fù)點(diǎn)擊等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無限制，會(huì)加重瀏覽器的負(fù)擔(dān)，體驗(yàn)糟糕。所以可以采用debounce（防抖）和throttle（節(jié)流）的方式來減少調(diào)用頻率，同時(shí)又不影響實(shí)際效果。

我們一起先來看看防抖和節(jié)流的區(qū)別

防抖函數(shù) debounce

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

如何調(diào)用

防抖和節(jié)流都利用了閉包，首先就調(diào)用了debounce和debounce方法，把內(nèi)部的方法返回出去，下次自己執(zhí)行，以后有時(shí)間我再寫一下閉包吧，所以我還留下一個(gè)問題，這樣會(huì)不會(huì)造成內(nèi)存泄漏？

JS中節(jié)流和防抖函數(shù)的實(shí)現(xiàn)和區(qū)別

在前端開發(fā)中，經(jīng)常和 DOM 、 BOM 打交道，例如：窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)，按鈕點(diǎn)擊等等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無限制，會(huì)加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。此時(shí)我們可以采用 throttle（節(jié)流） 和 debounce（防抖） 的方式來減少調(diào)用頻率，提高性能的同時(shí)又不影響實(shí)際效果。

實(shí)現(xiàn)方式： 每次觸發(fā)事件時(shí)，如果當(dāng)前有等待執(zhí)行的延時(shí)函數(shù)，則直接return。

區(qū)別 ： 節(jié)流函數(shù) 不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)，而 防抖函數(shù) 只是在最后一次事件后才觸發(fā)一次函數(shù)。 比如在頁面的無限加載場景下，我們需要用戶在滾動(dòng)頁面時(shí)，每隔一段時(shí)間發(fā)一次 Ajax 請(qǐng)求，而不是在用戶停下滾動(dòng)頁面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場景，就適合用節(jié)流技術(shù)來實(shí)現(xiàn)。

Lodash 是一個(gè)一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫。其中就封裝好了節(jié)流函數(shù) throttle 和防抖函數(shù) debounce 。

參數(shù)：

返回： (Function): 返回 節(jié)流 的函數(shù)。

例子：

參數(shù)：

返回： (Function): 返回新的 debounced （防抖動(dòng)）函數(shù)。

例子：

1.節(jié)流 ：使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。原理是通過判斷是否有延遲調(diào)用函數(shù)未執(zhí)行。

2.防抖 ：將多次操作合并為一次操作進(jìn)行。原理是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，就會(huì)取消之前的計(jì)時(shí)器而重新設(shè)置。這樣一來，只有最后一次操作能被觸發(fā)。

歡迎訪問： 天問博客

js的防抖、節(jié)流

防抖和節(jié)流，這是前端防止用戶頻繁調(diào)用同一個(gè)接口的方法，比如短時(shí)間重復(fù)點(diǎn)擊上傳同一個(gè)文件，短時(shí)間重復(fù)點(diǎn)擊提交同一個(gè)評(píng)論，異步的操作還沒給你帶來反饋，于是你重復(fù)上傳了多個(gè)文件，重復(fù)提交了多個(gè)評(píng)論。

舉例一個(gè)場景：為了例子更加簡單，我們就用延遲來模擬一個(gè)后端接口返回的過程。

以上是一個(gè)發(fā)表評(píng)論的例子，由于接口一秒后才會(huì)響應(yīng)評(píng)論反饋到界面上。

用戶本意只是發(fā)布一條評(píng)論，但是由于接口需要響應(yīng)時(shí)間，他以為自己的第一次點(diǎn)擊沒有生效于是就多點(diǎn)擊了兩次，結(jié)果顯而易見，就是非用戶本意的發(fā)布了三條一樣的評(píng)論。

我們希望的是用戶不要在請(qǐng)求還在進(jìn)行的時(shí)候，頻繁的重復(fù)發(fā)送請(qǐng)求。這時(shí)候就需要防抖節(jié)流了。

快速點(diǎn)擊幾次，還是只會(huì)發(fā)送一條評(píng)論。

但是缺點(diǎn)就是用戶得到響應(yīng)的時(shí)間更久了，得要算上延遲加上接口的響應(yīng)。

速點(diǎn)擊幾次，還是只會(huì)發(fā)送一條評(píng)論。只有一條請(qǐng)求發(fā)布成功之后，才能夠發(fā)布第二條請(qǐng)求，對(duì)于該場景十分合適。