Vue防抖與節(jié)流的使用介紹
概念
1. 防抖
防抖策略(debounce):是當(dāng)事件被觸發(fā)后,延遲n秒后再執(zhí)行回調(diào)函數(shù),如果在這n秒內(nèi)事件被再次觸發(fā),則重新計(jì)時(shí).
好處是:它能夠保證用戶在頻繁觸發(fā)某些事件的時(shí)候,不會(huì)頻繁的執(zhí)行回調(diào),只會(huì)被執(zhí)行一次.
防抖的概念:如果有人進(jìn)電梯(觸發(fā)事件),那電梯將在10秒鐘后出發(fā)(執(zhí)行事件監(jiān)聽器),這時(shí)如果又有人進(jìn)電梯了(在10秒內(nèi)再次觸發(fā)該事件),我們又得等10秒再出發(fā)(重新計(jì)時(shí))。
防抖的應(yīng)用場(chǎng)景::
用戶在輸入框連續(xù)輸入一串字符時(shí),可以通過防抖策略,只在輸入完后,才執(zhí)行查詢的請(qǐng)求,這樣可以有效減少請(qǐng)求次數(shù),節(jié)約請(qǐng)求資源.
2. 節(jié)流策略
節(jié)流策略(throttle):,可以減少一段時(shí)間內(nèi)事件的觸發(fā)頻率.
節(jié)流閥的概念:
高鐵的衛(wèi)生間是否被占用,由紅綠燈控制,假設(shè)一個(gè)每個(gè)人上洗手間要五分鐘,則五分鐘之內(nèi)別人不可以使用,上一個(gè)使用完畢之后,將紅燈設(shè)置為綠燈,表示下一個(gè)人可以使用了.下一個(gè)人在使用洗手間時(shí)需要先判斷控制燈是否為綠色,來知曉洗手間是否可用.
–節(jié)流閥為空,表示可以執(zhí)行下一次操作,不為空,表示不能使用下次操作.
–當(dāng)前操作執(zhí)行完之后要將節(jié)流閥重置為空,表示可以執(zhí)行下次操作了.
–每次執(zhí)行操作之前,先判斷節(jié)流閥是否為空
節(jié)流策略的應(yīng)用場(chǎng)景:
1)鼠標(biāo)不斷觸發(fā)某事件時(shí),如點(diǎn)擊,只在單位事件內(nèi)觸發(fā)一次.
2)懶加載時(shí)要監(jiān)聽計(jì)算滾動(dòng)條的位置,但不必要每次滑動(dòng)都觸發(fā),可以降低計(jì)算頻率,而不必要浪費(fèi)CPU資源.
Vue中的使用
項(xiàng)目中新建一個(gè)throttleDebounce.js文件
export default { // 防抖 debounce: function (fn, t) { let delay = t || 500; let timer; return function () { let th = this; let args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { timer = null; fn.apply(th, args); }, delay); } }, // 節(jié)流 throttle: function (fn, t) { let last; let timer; let interval = t || 500; return function () { let th = this; let args = arguments; let now = +new Date(); if (last && now - last < interval) { clearTimeout(timer); timer = setTimeout(function () { last = now; fn.apply(th, args); }, interval); } else { last = now; fn.apply(th, args); } } } }
FileConvert.vue文件
引入
import throttleDebounce from '@/utils/throttleDebounce.js'
// convertRes 是el-button綁定的點(diǎn)擊事件 methods:{ convertRes: throttleDebounce.throttle(function() { // 需要節(jié)流的事件,我這里是接口的調(diào)取 this.convertResFinal() }, 500), // 節(jié)流的事件 convertResFinal() { this.$refs['form'].validate(async valid => { if (valid) { this.hexBtnLoading = true const params = { arch: this.form.arch, addr: this.form.addr, hexdump: this.form.hexdump } try { const res = await getVexConvertRes(params) if (res.code === 200) { } } catch (error) { } } }) }, }
到此這篇關(guān)于Vue防抖與節(jié)流的使用介紹的文章就介紹到這了,更多相關(guān)Vue防抖與節(jié)流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用Vue實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了使用Vue實(shí)現(xiàn)簡(jiǎn)單日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式
這篇文章主要介紹了element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue中實(shí)現(xiàn)彈出層動(dòng)畫效果的示例代碼
這篇文章主要介紹了vue中怎樣實(shí)現(xiàn)彈出層動(dòng)畫效果,由上而下漸漸顯示,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-09-09一篇文章教你實(shí)現(xiàn)VUE多個(gè)DIV,button綁定回車事件
這篇文章主要介紹了VUE多個(gè)DIV綁定回車事件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2021-10-10淺談vue獲得后臺(tái)數(shù)據(jù)無法顯示到table上面的坑
這篇文章主要介紹了淺談vue獲得后臺(tái)數(shù)據(jù)無法顯示到table上面的坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue 自定義指令實(shí)現(xiàn)一鍵 Copy功能
指令 (Directives) 是帶有 v- 前綴的特殊特性。這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)一鍵 Copy的功能,需要的朋友可以參考下2019-09-09Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流
本文主要介紹了Vue+LogicFlow+Flowable實(shí)現(xiàn)工作流,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12