基于Vue中使用節(jié)流Lodash throttle詳解
在Vue中使用 Lodash.throttle 來做節(jié)流
在Vue中,有時(shí)需要對ajax請求提交進(jìn)行節(jié)流操作.這時(shí)候,如果頁面在請求成功之后會跳轉(zhuǎn),使用vue指令once或者加載一個(gè)loading遮罩禁止點(diǎn)擊即可,但如果請求之后不跳轉(zhuǎn),并且loading不適用時(shí),需要通過其他方式來實(shí)現(xiàn)節(jié)流,比如通過標(biāo)識位判斷等,這里我們著重說一下如何通過lodash.throttle來實(shí)現(xiàn)節(jié)流
lodash是一個(gè)廣受歡迎的js工具庫,其中包含了各種各樣的工具函數(shù),方便開發(fā)時(shí)不需要反復(fù)造輪子,更關(guān)注于業(yè)務(wù).目前已經(jīng)是4.x版本,文檔也十分好找lodash中文文檔
這是lodash中的節(jié)流函數(shù),具體作用可以直接看官方文檔,這里不再進(jìn)行解釋
說下在vue中具體怎么用
首先上錯(cuò)誤用法
import _ from 'lodash'
export default{
methods:{
click(){
_.throttle(()=>{
console.log('hello')
},1000)
}
}
}
以上這樣寫,在執(zhí)行時(shí)候并不會打印console
正確用法
import _ from 'lodash'
export default{
methods:{
click:_.throttle(function(){
console.log('hello')
console.log(this)
},1000)
}
}
在lodash的throttle方法中,可以直接使用function,而且額外的好處是無需重新指向this,在函數(shù)內(nèi)部中,已經(jīng)做了apply,所以這里的this指向的就是vue實(shí)例,這樣對已有函數(shù)的改造也是十分的方便,外面包一層_.throttle就可以了!
以上這篇基于Vue中使用節(jié)流Lodash throttle詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例
本文主要介紹了Vue3+Element-Plus實(shí)現(xiàn)左側(cè)菜單折疊與展開功能示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解Vscode中使用Eslint終極配置大全，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
本文主要介紹了淺談Vue?DIFF，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue指令v-html使用過濾器filters功能實(shí)例
在本篇文章里我們給大家整理的是關(guān)于vue指令v-html使用過濾器filters功能的實(shí)例內(nèi)容，需要的朋友們學(xué)習(xí)下。2019-10-10
vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證
這篇文章主要介紹了vue element實(shí)現(xiàn)多個(gè)Formt表單同時(shí)驗(yàn)證方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue中使用refs定位dom出現(xiàn)undefined的解決方法
本篇文章主要介紹了vue中使用refs定位dom出現(xiàn)undefined的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點(diǎn)，開發(fā)靈活，并且打包之后體積更小速度更快,需要的朋友可以參考下2019-06-06
vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue+Router+Element實(shí)現(xiàn)簡易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Vue+Router+Element實(shí)現(xiàn)簡易導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09