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