Vue中使用 Lodash.throttle 來(lái)做節(jié)流

在Vue中,有時(shí)需要對(duì)ajax請(qǐng)求提交進(jìn)行節(jié)流操作.這時(shí)候,如果頁(yè)面在請(qǐng)求成功之后會(huì)跳轉(zhuǎn),使用vue指令once或者加載一個(gè)loading遮罩禁止點(diǎn)擊即可,但如果請(qǐng)求之后不跳轉(zhuǎn),并且loading不適用時(shí),需要通過(guò)其他方式來(lái)實(shí)現(xiàn)節(jié)流,比如通過(guò)標(biāo)識(shí)位判斷等,這里我們著重說(shuō)一下如何通過(guò)lodash.throttle來(lái)實(shí)現(xiàn)節(jié)流

lodash

lodash是一個(gè)廣受歡迎的js工具庫(kù),其中包含了各種各樣的工具函數(shù),方便開(kāi)發(fā)時(shí)不需要反復(fù)造輪子,更關(guān)注于業(yè)務(wù).目前已經(jīng)是4.x版本,文檔也十分好找lodash中文文檔

_.throttle

這是lodash中的節(jié)流函數(shù),具體作用可以直接看官方文檔,這里不再進(jìn)行解釋

說(shuō)下在vue中具體怎么用

首先上錯(cuò)誤用法

import _ from 'lodash'

export default{
 methods:{
    click(){
        _.throttle(()=>{
            console.log('hello')
        },1000)
    }
 }
}

以上這樣寫,在執(zhí)行時(shí)候并不會(huì)打印console

正確用法

<button @click="clickMe">Click Me</button>

import _ from 'lodash'

export default{
 methods:{
    clickMe:_.throttle(function(event){
            console.log('hello')
            console.log(this)
            console.log('event',event)
    },1000)
 }
}

在lodash的throttle方法中,可以直接使用function,而且額外的好處是無(wú)需重新指向this,在函數(shù)內(nèi)部中,已經(jīng)做了apply,所以這里的this指向的就是vue實(shí)例,這樣對(duì)已有函數(shù)的改造也是十分的方便,外面包一層_.throttle就可以了!

注意

不要在throttle或者debounce中使用箭頭函數(shù),會(huì)導(dǎo)致this指向不正確,lodash中已通過(guò)apply為function繼承了原函數(shù)的this指向