如何節流，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就可以了!