溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在Vue中使用 Lodash.throttle 來做節流
在Vue中,有時需要對ajax請求提交進行節流操作.這時候,如果頁面在請求成功之后會跳轉,使用vue指令once或者加載一個loading遮罩禁止點擊即可,但如果請求之后不跳轉,并且loading不適用時,需要通過其他方式來實現節流,比如通過標識位判斷等,這里我們著重說一下如何通過lodash.throttle來實現節流
lodash
lodash是一個廣受歡迎的js工具庫,其中包含了各種各樣的工具函數,方便開發時不需要反復造輪子,更關注于業務.目前已經是4.x版本,文檔也十分好找lodash中文文檔
_.throttle
這是lodash中的節流函數,具體作用可以直接看官方文檔,這里不再進行解釋
說下在vue中具體怎么用
首先上錯誤用法
import _ from 'lodash'
export default{
methods:{
click(){
_.throttle(()=>{
console.log('hello')
},1000)
}
}
}
以上這樣寫,在執行時候并不會打印console
正確用法
import _ from 'lodash'
export default{
methods:{
click:_.throttle(function(){
console.log('hello')
console.log(this)
},1000)
}
}
在lodash的throttle方法中,可以直接使用function,而且額外的好處是無需重新指向this,在函數內部中,已經做了apply,所以這里的this指向的就是vue實例,這樣對已有函數的改造也是十分的方便,外面包一層_.throttle就可以了!
以上這篇基于Vue中使用節流Lodash throttle詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
