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