vue中安裝lodash

cnpm i lodash -S

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