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就可以了!