您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JS中節(jié)流和防抖怎么實(shí)現(xiàn)”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JS中節(jié)流和防抖怎么實(shí)現(xiàn)”吧!
在前端開發(fā)中,經(jīng)常和DOM、BOM打交道,例如:窗口的resize、scroll,輸入框內(nèi)容校驗(yàn),按鈕點(diǎn)擊等等操作時,如果事件處理函數(shù)調(diào)用的頻率無限制,會加重瀏覽器的負(fù)擔(dān),導(dǎo)致用戶體驗(yàn)非常糟糕。
此時我們可以采用throttle(節(jié)流)和debounce(防抖)的方式來減少調(diào)用頻率,提高性能的同時又不影響實(shí)際效果。
函數(shù)節(jié)流( throttle ):高頻事件觸發(fā),但在n秒內(nèi)只會執(zhí)行一次,所以節(jié)流會稀釋函數(shù)的執(zhí)行頻率。
函數(shù)防抖( debounce ):觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次,如果n秒內(nèi)高頻事件再次被觸發(fā),則重新計算時間。
函數(shù)節(jié)流(throttle)與函數(shù)防抖(debounce)都是為了限制函數(shù)的執(zhí)行頻次,以優(yōu)化函數(shù)觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率,出現(xiàn)延遲,假死或卡頓的現(xiàn)象。
函數(shù)節(jié)流( throttle )
實(shí)現(xiàn)方式: 每次觸發(fā)事件時,如果當(dāng)前有等待執(zhí)行的延時函數(shù),則直接return。
// 節(jié)流 throttle 代碼 function throttle(fn,delay) { let canRun = true; // 通過閉包保存一個標(biāo)記 return function () { // 在函數(shù)開頭判斷標(biāo)記是否為true,不為true則return if (!canRun) return; // 立即設(shè)置為false canRun = false; // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中 setTimeout(() => { // 最后在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true(關(guān)鍵)表示可以執(zhí)行下一次循環(huán)了。 // 當(dāng)定時器沒有執(zhí)行的時候標(biāo)記永遠(yuǎn)是false,在開頭被return掉 fn.apply(this, arguments); canRun = true; }, delay); }; } function log(e) { console.log('節(jié)流:', e.target.innerWidth, e.target.innerHeight); } window.addEventListener('resize', throttle(log,500));
函數(shù)防抖( debounce )
實(shí)現(xiàn)方式: 每次觸發(fā)事件時設(shè)置一個延遲調(diào)用方法,并且取消之前的延時調(diào)用方法。
缺點(diǎn): 如果事件在規(guī)定的時間間隔內(nèi)被不斷的觸發(fā),則調(diào)用方法會被不斷的延遲。
// 防抖 debounce 代碼 function debounce(fn,delay) { var timeout = null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值 return function (e) { // 每當(dāng)用戶輸入的時候把前一個 setTimeout clear 掉 clearTimeout(timeout); // 然后又創(chuàng)建一個新的 setTimeout, 這樣就能保證interval 間隔內(nèi)如果時間持續(xù)觸發(fā),就不會執(zhí)行 fn 函數(shù) timeout = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } // 處理函數(shù) function run() { console.log('防抖:', Math.random()); } //滾動事件 window.addEventListener('scroll', debounce(run, 500));
節(jié)流函數(shù)不管事件觸發(fā)有多頻繁,都會保證在規(guī)定時間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù),而防抖函數(shù)只是在最后一次事件后才觸發(fā)一次函數(shù)。
比如在頁面的無限加載場景下,我們需要用戶在滾動頁面時,每隔一段時間發(fā)一次 Ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數(shù)據(jù)。這樣的場景,就適合用節(jié)流技術(shù)來實(shí)現(xiàn)。
Lodash 是一個一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫。其中就封裝好了節(jié)流函數(shù) throttle 和防抖函數(shù) debounce。
參數(shù):
func (Function): 要節(jié)流的函數(shù)。
[wait=0] (number): 需要節(jié)流的毫秒。
[options=] (Object): 選項(xiàng)對象。
[options.leading=true] (boolean): 指定調(diào)用在節(jié)流開始前。
[options.trailing=true] (boolean): 指定調(diào)用在節(jié)流結(jié)束后。
返回: (Function): 返回節(jié)流的函數(shù)。
例子:
// 避免在滾動時過分的更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 點(diǎn)擊后就調(diào)用 `renewToken`,但5分鐘內(nèi)超過1次。 var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); jQuery(element).on('click', throttled); // 取消一個 trailing 的節(jié)流調(diào)用。 jQuery(window).on('popstate', throttled.cancel);
參數(shù):
func (Function): 要防抖動的函數(shù)。
[wait=0] (number): 需要延遲的毫秒數(shù)。
[options=] (Object): 選項(xiàng)對象。
[options.leading=false] (boolean): 指定在延遲開始前調(diào)用。
[options.maxWait] (number): 設(shè)置 func 允許被延遲的最大值。
[options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用。
返回: (Function): 返回新的 debounced(防抖動)函數(shù)。
例子:
// 避免窗口在變動時出現(xiàn)昂貴的計算開銷。 jQuery(window).on('resize', _.debounce(calculateLayout, 150)); // 當(dāng)點(diǎn)擊時 `sendMail` 隨后就被調(diào)用。 jQuery(element).on('click', _.debounce(sendMail, 300, { 'leading': true, 'trailing': false })); // 確保 `batchLog` 調(diào)用1次之后,1秒內(nèi)會被觸發(fā)。 var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); var source = new EventSource('/stream'); jQuery(source).on('message', debounced); // 取消一個 trailing 的防抖動調(diào)用 jQuery(window).on('popstate', debounced.cancel);
resize事件監(jiān)聽瀏覽器屏幕寬高,自適應(yīng)適配操作
scroll事件監(jiān)聽屏幕滾動,如:導(dǎo)航欄/Tab欄動態(tài)置頂、下拉刷新、上劃加載更多
表單的input事件查詢接口獲取數(shù)據(jù)
tab切換頻率控制,防止頻繁點(diǎn)擊過快
Echart圖表中tooltip.formatter方法
到此,相信大家對“JS中節(jié)流和防抖怎么實(shí)現(xiàn)”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。