2021-5-8 前端達(dá)人
本文由小芭樂(lè)發(fā)表
首先舉一個(gè)例子：
模擬在輸入框輸入后做ajax查詢請(qǐng)求，沒(méi)有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>沒(méi)有防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模擬ajax請(qǐng)求 function ajax(content) { console.log('ajax request ' + content) } let inputNormal = document.getElementById('normal'); inputNormal.addEventListener('keyup', function (e) { ajax(e.target.value) }) } </script> </head> <body> <div> 1.沒(méi)有防抖的輸入： <input type="text" name="normal" id="normal"> </div> </body> </html> 效果：在輸入框里輸入一個(gè)，就會(huì)觸發(fā)一次“ajax請(qǐng)求”（此處是console）。
沒(méi)有防抖和節(jié)流
缺點(diǎn)：浪費(fèi)請(qǐng)求資源，可以加入防抖和節(jié)流來(lái)優(yōu)化一下。
本文會(huì)分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場(chǎng)景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問(wèn)題，比如觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。但二者應(yīng)對(duì)的業(yè)務(wù)需求不一樣，所以實(shí)現(xiàn)的原理也不一樣，下面具體來(lái)看看吧。
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。
(1) 用戶在輸入框中連續(xù)輸入一串字符后，只會(huì)在輸入完后去執(zhí)行最后一次的查詢ajax請(qǐng)求，這樣可以有效減少請(qǐng)求次數(shù)，節(jié)約請(qǐng)求資源；
(2) window的resize、scroll事件，不斷地調(diào)整瀏覽器的窗口大小、或者滾動(dòng)時(shí)會(huì)觸發(fā)對(duì)應(yīng)事件，防抖讓其只觸發(fā)一次；
還是上述列子，這里加入防抖來(lái)優(yōu)化一下，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入防抖</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模擬ajax請(qǐng)求 function ajax(content) { console.log('ajax request ' + content) } function debounce(fun, delay) { return function (args) { //獲取函數(shù)的作用域和變量 let that = this let _args = args //每次事件被觸發(fā)，都會(huì)清除當(dāng)前的timeer，然后重寫設(shè)置超時(shí)調(diào)用 clearTimeout(fun.id) fun.id = setTimeout(function () { fun.call(that, _args) }, delay) } } let inputDebounce = document.getElementById('debounce') let debounceAjax = debounce(ajax, 500) inputDebounce.addEventListener('keyup', function (e) { debounceAjax(e.target.value) }) } </script> </head> <body> <div> 2.加入防抖后的輸入： <input type="text" name="debounce" id="debounce"> </div> </body> </html> 代碼說(shuō)明：
1.每一次事件被觸發(fā)，都會(huì)清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用，即重新計(jì)時(shí)。 這就會(huì)導(dǎo)致每一次高頻事件都會(huì)取消前一次的超時(shí)調(diào)用，導(dǎo)致事件處理程序不能被觸發(fā)；
2.只有當(dāng)高頻事件停止，最后一次事件觸發(fā)的超時(shí)調(diào)用才能在delay時(shí)間后執(zhí)行；
效果：
加入防抖后，當(dāng)持續(xù)在輸入框里輸入時(shí)，并不會(huì)發(fā)送請(qǐng)求，只有當(dāng)在指定時(shí)間間隔內(nèi)沒(méi)有再輸入時(shí)，才會(huì)發(fā)送請(qǐng)求。如果先停止輸入，但是在指定間隔內(nèi)又輸入，會(huì)重新觸發(fā)計(jì)時(shí)。
加入防抖
規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。
(1)鼠標(biāo)連續(xù)不斷地觸發(fā)某事件（如點(diǎn)擊），只在單位時(shí)間內(nèi)只觸發(fā)一次；
(2)在頁(yè)面的無(wú)限加載場(chǎng)景下，需要用戶在滾動(dòng)頁(yè)面時(shí)，每隔一段時(shí)間發(fā)一次 ajax 請(qǐng)求，而不是在用戶停下滾動(dòng)頁(yè)面操作時(shí)才去請(qǐng)求數(shù)據(jù)；
(3)監(jiān)聽(tīng)滾動(dòng)事件，比如是否滑到底部自動(dòng)加載更多，用throttle來(lái)判斷；
還是上述列子，這里加入節(jié)流來(lái)優(yōu)化一下，完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加入節(jié)流</title> <style type="text/css"></style> <script type="text/javascript"> window.onload = function () { //模擬ajax請(qǐng)求 function ajax(content) { console.log('ajax request ' + content) } 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 inputThrottle = document.getElementById('throttle') inputThrottle.addEventListener('keyup', function (e) { throttleAjax(e.target.value) }) } </script> </head> <body> <div> 3.加入節(jié)流后的輸入： <input type="text" name="throttle" id="throttle"> </div> </body> </html> 效果：實(shí)驗(yàn)可發(fā)現(xiàn)在持續(xù)輸入時(shí)，會(huì)安裝代碼中的設(shè)定，每1秒執(zhí)行一次ajax請(qǐng)求
加入節(jié)流
總結(jié)下防抖和節(jié)流的區(qū)別：
-- 效果：
函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次；而函數(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í)。這樣一來(lái)，只有最后一次操作能被觸發(fā)。
節(jié)流是通過(guò)判斷是否到達(dá)一定時(shí)間來(lái)觸發(fā)函數(shù)，若沒(méi)到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器。
如有問(wèn)題，歡迎指正。
轉(zhuǎn)自知乎 原文鏈接：https://zhuanlan.zhihu.com/p/51608574
藍(lán)藍(lán)設(shè)計(jì)( www.payeee.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.payeee.cn