基于Vue中使用節(jié)流Lodash throttle詳解
在Vue中使用 Lodash.throttle 來做節(jié)流
在Vue中,有時(shí)需要對ajax請求提交進(jìn)行節(jié)流操作.這時(shí)候,如果頁面在請求成功之后會(huì)跳轉(zhuǎn),使用vue指令once或者加載一個(gè)loading遮罩禁止點(diǎn)擊即可,但如果請求之后不跳轉(zhuǎn),并且loading不適用時(shí),需要通過其他方式來實(shí)現(xiàn)節(jié)流,比如通過標(biāo)識(shí)位判斷等,這里我們著重說一下如何通過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í)候并不會(huì)打印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)文章
Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解
這篇文章主要介紹了使用Vue實(shí)現(xiàn)textarea固定輸入行數(shù)與添加下劃線樣式的思路詳解，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
關(guān)于vue v-for 循環(huán)問題(一行顯示四個(gè),每一行的最右邊那個(gè)計(jì)算屬性)
這篇文章主要介紹了關(guān)于vue v-for 循環(huán)問題(一行顯示四個(gè),每一行的最右邊那個(gè)計(jì)算屬性),需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于axios異步提交表單數(shù)據(jù)的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對各位大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vuex是專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，這篇文章主要介紹了Vuex的屬性，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
通過vue.extend實(shí)現(xiàn)消息提示彈框的方法記錄
這篇文章主要給大家介紹了關(guān)于通過vue.extend實(shí)現(xiàn)消息提示彈框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue定義在computed的變量無法更新問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了VUE 數(shù)組更新問題，文中給大家介紹了vue如何監(jiān)聽數(shù)據(jù)的變化的 ,需要的朋友可以參考下2017-12-12
VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
這篇文章主要介紹了VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)詳解
在移動(dòng)應(yīng)用開發(fā)中,uniApp框架提供了一種跨平臺(tái)的解決方案,允許開發(fā)者使用一套代碼來構(gòu)建iOS、Android等多平臺(tái)的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng),需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue+canvas實(shí)現(xiàn)視頻截圖功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07