您好,登錄后才能下訂單哦!
這篇文章給大家介紹JavaScript中怎么實現(xiàn)防抖和節(jié)流,內(nèi)容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
首先舉一個例子:
模擬在輸入框輸入后做ajax查詢請求,沒有加入防抖和節(jié)流的效果,這里附上完整可執(zhí)行代碼:
<!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請求 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.沒有防抖的輸入: <input type="text" name="normal" id="normal"> </div> </body> </html>
效果:在輸入框里輸入一個,就會觸發(fā)一次“ajax請求”(此處是console)。
沒有防抖和節(jié)流
缺點:浪費請求資源,可以加入防抖和節(jié)流來優(yōu)化一下。
本文會分別介紹什么是防抖和節(jié)流,它們的應(yīng)用場景,和實現(xiàn)方式。防抖和節(jié)流都是為了解決短時間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題,比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率,出現(xiàn)延遲,假死或卡頓的現(xiàn)象。但二者應(yīng)對的業(yè)務(wù)需求不一樣,所以實現(xiàn)的原理也不一樣,下面具體來看看吧。
1. 防抖(debounce)
1.1 什么是防抖
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù),如果在這n秒內(nèi)又被觸發(fā),則重新計時。
1.2 應(yīng)用場景
(1) 用戶在輸入框中連續(xù)輸入一串字符后,只會在輸入完后去執(zhí)行最后一次的查詢ajax請求,這樣可以有效減少請求次數(shù),節(jié)約請求資源;
(2) window的resize、scroll事件,不斷地調(diào)整瀏覽器的窗口大小、或者滾動時會觸發(fā)對應(yīng)事件,防抖讓其只觸發(fā)一次;
1.3 實現(xiàn)
還是上述列子,這里加入防抖來優(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請求 function ajax(content) { console.log('ajax request ' + content) } function debounce(fun, delay) { return function (args) { //獲取函數(shù)的作用域和變量 let that = this let _args = args //每次事件被觸發(fā),都會清除當(dāng)前的timeer,然后重寫設(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>
代碼說明:
1.每一次事件被觸發(fā),都會清除當(dāng)前的 timer 然后重新設(shè)置超時調(diào)用,即重新計時。 這就會導(dǎo)致每一次高頻事件都會取消前一次的超時調(diào)用,導(dǎo)致事件處理程序不能被觸發(fā);
2.只有當(dāng)高頻事件停止,最后一次事件觸發(fā)的超時調(diào)用才能在delay時間后執(zhí)行;
效果:
加入防抖后,當(dāng)持續(xù)在輸入框里輸入時,并不會發(fā)送請求,只有當(dāng)在指定時間間隔內(nèi)沒有再輸入時,才會發(fā)送請求。如果先停止輸入,但是在指定間隔內(nèi)又輸入,會重新觸發(fā)計時。
加入防抖
2.節(jié)流(throttle)
2.1 什么是節(jié)流
規(guī)定一個單位時間,在這個單位時間內(nèi),只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行,如果在同一個單位時間內(nèi)某事件被觸發(fā)多次,只有一次能生效。
2.2 應(yīng)用場景
(1)鼠標(biāo)連續(xù)不斷地觸發(fā)某事件(如點擊),只在單位時間內(nèi)只觸發(fā)一次;
(2)在頁面的無限加載場景下,需要用戶在滾動頁面時,每隔一段時間發(fā)一次 ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù);
(3)監(jiān)聽滾動事件,比如是否滑到底部自動加載更多,用throttle來判斷;
2.3 實現(xiàn)
還是上述列子,這里加入節(jié)流來優(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請求 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>
效果:實驗可發(fā)現(xiàn)在持續(xù)輸入時,會安裝代碼中的設(shè)定,每1秒執(zhí)行一次ajax請求
加入節(jié)流
3. 小結(jié)
總結(jié)下防抖和節(jié)流的區(qū)別:
-- 效果:
函數(shù)防抖是某一段時間內(nèi)只執(zhí)行一次;而函數(shù)節(jié)流是間隔時間執(zhí)行,不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。
-- 原理:
防抖是維護一個計時器,規(guī)定在delay時間后觸發(fā)函數(shù),但是在delay時間內(nèi)再次觸發(fā)的話,都會清除當(dāng)前的 timer 然后重新設(shè)置超時調(diào)用,即重新計時。這樣一來,只有最后一次操作能被觸發(fā)。
節(jié)流是通過判斷是否到達一定時間來觸發(fā)函數(shù),若沒到規(guī)定時間則使用計時器延后,而下一次事件則會重新設(shè)定計時器。
關(guān)于JavaScript中怎么實現(xiàn)防抖和節(jié)流就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。