解讀函數(shù)的節(jié)流與防抖問(wèn)題
函數(shù)的節(jié)流與防抖
1、節(jié)流
節(jié)流的意思是,規(guī)定時(shí)間內(nèi),只觸發(fā)一次。比如我們?cè)O(shè)定500ms,在這個(gè)時(shí)間內(nèi),無(wú)論點(diǎn)擊按鈕多少次,它都只會(huì)觸發(fā)一次。具體場(chǎng)景可以是搶購(gòu)時(shí)候,由于有無(wú)數(shù)人 快速點(diǎn)擊按鈕,如果每次點(diǎn)擊都發(fā)送請(qǐng)求,就會(huì)給服務(wù)器造成巨大的壓力,但是我們進(jìn)行節(jié)流后,就會(huì)大大減少請(qǐng)求的次數(shù)。
2、防抖
防抖的意思是,在連續(xù)的操作中,無(wú)論進(jìn)行了多長(zhǎng)時(shí)間,只有某一次的操作后在指定的時(shí)間內(nèi)沒有再操作,這一次才被判定有效。具體場(chǎng)景可以搜索框輸入關(guān)鍵字過(guò)程中實(shí)時(shí) 請(qǐng)求服務(wù)器匹配搜索結(jié)果,如果不進(jìn)行處理,那么就是輸入框內(nèi)容一直變化,導(dǎo)致一直發(fā)送請(qǐng)求。如果進(jìn)行防抖處理,結(jié)果就是當(dāng)我們輸入內(nèi)容完成后,一定時(shí)間(比如500ms)沒有再 輸入內(nèi)容,這時(shí)再觸發(fā)請(qǐng)求。
//防抖 export const debounce = (() => { let timer = null return (callback, wait = 200) => { timer&&clearTimeout(timer) timer = setTimeout(callback, wait) } })() /*xxx.vue中使用 methods: { loadList() { debounce(() => { console.log('加載數(shù)據(jù)') }, 500) } } */ // 節(jié)流 export const throttle = (() => { let last = 0 return (callback, wait = 200) => { let now = +new Date() if (now - last > wait) { callback() last = now } } })()
函數(shù)防抖和函數(shù)節(jié)流及其使用場(chǎng)景
1、為什么會(huì)使用到函數(shù)防抖和函數(shù)節(jié)流
我們?cè)谄綍r(shí)代碼的開發(fā)過(guò)程中,會(huì)有很多場(chǎng)景會(huì)頻繁觸發(fā)事件,比如說(shuō)搜索框?qū)崟r(shí)發(fā)請(qǐng)求,onmousemove, resize, onscroll等等,有些時(shí)候,我們并不想頻繁觸發(fā)事件,這時(shí)候就可以用到函數(shù)防抖和函數(shù)節(jié)流。
2、什么是函數(shù)防抖和函數(shù)節(jié)流?
函數(shù)防抖:如果一個(gè)事件被頻繁執(zhí)行多次,并且觸發(fā)的時(shí)間間隔過(guò)短,則防抖函數(shù)可以使得對(duì)應(yīng)的事件處理函數(shù),只執(zhí)行最后觸發(fā)的一次。函數(shù)防抖可以把多個(gè)順序的調(diào)用合并成一次。
函數(shù)節(jié)流:如果一個(gè)事件被頻繁觸發(fā)多次,節(jié)流函數(shù)可以按照固定的頻率去執(zhí)行相應(yīng)的事件處理方法。函數(shù)節(jié)流保證一個(gè)事件一定事件內(nèi)只能執(zhí)行一次。
函數(shù)防抖(debounce)
- 單位時(shí)間內(nèi),頻繁觸發(fā)事件,只會(huì)觸發(fā)最后一次
- 經(jīng)典應(yīng)用場(chǎng)景 : 輸入框輸入事件
- 減少觸發(fā)輸入的頻率,提高代碼性能
函數(shù)節(jié)流 (throttle)
- 函數(shù)節(jié)流 : 單位時(shí)間內(nèi),頻繁觸發(fā)事件,只會(huì)觸發(fā)一次
- 經(jīng)典應(yīng)用場(chǎng)景 :降低高頻事件觸發(fā)頻率
- 滾動(dòng)條事件:onscroll 鼠標(biāo)移動(dòng):onmousemove
函數(shù)防抖流程 :
- (1) 聲明全局變量記錄本次觸發(fā)時(shí)間
- (2) 每一次觸發(fā)事件, 獲取當(dāng)前時(shí)間
- (3) 判斷 當(dāng)前時(shí)間-上一次觸發(fā)時(shí)間>=節(jié)流間隔時(shí)間
- (4) 存儲(chǔ)本次觸發(fā)事件,用于下一次判斷
3、代碼
函數(shù)防抖
//函數(shù)防抖使用場(chǎng)景:【永遠(yuǎn)在執(zhí)行最后一次】 回到頂部,立即(實(shí)時(shí))搜索
// debounce() 函數(shù)進(jìn)入頁(yè)面立即執(zhí)行
// debounce() 必須返回函數(shù) 事件只能調(diào)用函數(shù)
而它的效果如下圖
沒有加防抖的話,鼠標(biāo)進(jìn)行滑動(dòng)時(shí)一直變化,也一直調(diào)用,運(yùn)行壓力大。加了防抖后,鼠標(biāo)滑動(dòng)不會(huì)調(diào)用,當(dāng)滑動(dòng)停止,則調(diào)用一次,大大降低了運(yùn)行壓力。
函數(shù)節(jié)流
// 所有的數(shù)據(jù)請(qǐng)求【按鈕】 下拉刷新
而它的效果圖如下
只要滑動(dòng)事件出現(xiàn),就會(huì)每1.5秒調(diào)用一次
總結(jié)
1. 相同點(diǎn):
- 都可以通過(guò)使用setTimeout或者時(shí)間戳實(shí)現(xiàn)。
- 目的都是,降低回調(diào)執(zhí)行頻率,節(jié)省計(jì)算資源。
2. 不同點(diǎn):
- 函數(shù)防抖,在一段連續(xù)操作結(jié)束后,處理回調(diào),關(guān)注一定時(shí)間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次。
- 函數(shù)節(jié)流,在一段連續(xù)操作中,每一段時(shí)間只執(zhí)行一次,側(cè)重于一段時(shí)間內(nèi)只執(zhí)行一次。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要介紹了手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2016-08-08js函數(shù)名與form表單元素同名沖突的問(wèn)題
本篇文章主要是對(duì)js函數(shù)名與form表單元素同名沖突的問(wèn)題進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置整理大全
直角坐標(biāo)系的設(shè)置指的是網(wǎng)格,坐標(biāo)軸和區(qū)域縮放的配置,下面這篇文章主要給大家介紹了關(guān)于Echarts直角坐標(biāo)系x軸y軸屬性設(shè)置的相關(guān)資料,需要的朋友可以參考下2022-11-11JavaScript forEach()遍歷函數(shù)使用及介紹
這篇文章主要介紹了JavaScript forEach()遍歷函數(shù)使用及介紹,本文講解了使用forEach遍歷數(shù)組的用法以及提前終止循環(huán)的一個(gè)方法技巧,需要的朋友可以參考下2015-07-07echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,ECharts是百度前端開發(fā)部開發(fā)的一個(gè)開源可視化庫(kù),它可以幫助開發(fā)者輕松的實(shí)現(xiàn)各種數(shù)據(jù)可視化,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12isArray()函數(shù)(JavaScript中對(duì)象類型判斷的幾種方法)
我們知道,JavaScript中檢測(cè)對(duì)象類型的運(yùn)算符有:typeof、instanceof,還有對(duì)象的constructor屬性2009-11-11JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03談?wù)凧avaScript類型系統(tǒng)之Math
Math 對(duì)象并不像 Date 和 String 那樣是對(duì)象的類,因此沒有構(gòu)造函數(shù) Math(),像 Math.sin() 這樣的函數(shù)只是函數(shù),不是某個(gè)對(duì)象的方法。您無(wú)需創(chuàng)建它,通過(guò)把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法2016-01-01JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(二)js事件處理程序的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06