快捷導(dǎo)航

vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題解決方案

更新時(shí)間：2023年10月09日 08:45:04 作者：自信可改變未來(lái)

在lodash函數(shù)工具庫(kù)中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用，這篇文章主要介紹了vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決,需要的朋友可以參考下

背景

在lodash函數(shù)工具庫(kù)中，防抖 _.debounce 和節(jié)流 _.throttle 函數(shù)在一些頻繁觸發(fā)的事件中比較常用。

防抖函數(shù) _.debounce(func, [wait=0], [options=])

創(chuàng)建一個(gè) debounced（防抖動(dòng)）函數(shù)，該函數(shù)會(huì)從上一次被調(diào)用后，延遲 wait 毫秒后調(diào)用 func 方法。

參數(shù)

func (Function): 要防抖動(dòng)的函數(shù)。
[wait=0] (number): 需要延遲的毫秒數(shù)。
[options=] (Object): 選項(xiàng)對(duì)象。
[options.leading=false] (boolean): 指定在延遲開始前調(diào)用。
[options.maxWait] (number): 設(shè)置 func 允許被延遲的最大值。
[options.trailing=true] (boolean): 指定在延遲結(jié)束后調(diào)用。

返回

(Function): 返回 debounced（防抖動(dòng)）函數(shù)。

節(jié)流函數(shù) _.throttle(func, [wait=0], [options=])

創(chuàng)建一個(gè)節(jié)流函數(shù)，在 wait 毫秒內(nèi)最多執(zhí)行 func 一次的函數(shù)。

參數(shù)

func (Function): 要節(jié)流的函數(shù)。
[wait=0] (number): 需要節(jié)流的毫秒。
[options=] (Object): 選項(xiàng)對(duì)象。
[options.leading=true] (boolean): 指定調(diào)用在節(jié)流開始前。
[options.trailing=true] (boolean): 指定調(diào)用在節(jié)流結(jié)束后。

返回

(Function): 返回 throttled（節(jié)流）的函數(shù)。

在vue中使用防抖節(jié)流函數(shù)的問(wèn)題

踩坑1

防抖節(jié)流函數(shù)實(shí)際上起到一個(gè)“稀釋”的作用，在vue項(xiàng)目中我們可能會(huì)這樣寫（節(jié)流為例）。

<template>
    <div>
        <button @click="add_throttle">加1</button>
        <h1>{{ number }}</h1>
    </div>
</template>
<script>
import { throttle } from 'lodash';
export default {
    data() {
        return {
            number: 1
        };
    },
    methods: {
        // add函數(shù)做節(jié)流處理
        add_throttle: throttle(this.add, 1000),
        add() {
            this.number++;
        }
    },
};
</script>

然后我們信心滿滿地F12打開控制臺(tái)……

上面說(shuō) add 這玩意兒 undefined 了。

這其實(shí)是 this 的指向問(wèn)題。實(shí)際上這里的 this 并不是vue實(shí)例（至于是什么，往下看你就知道了[doge]），所以自然不存在 add() 方法了。

踩坑2

既然直接使用 this.add() 不成，那我們換個(gè)思路，把 this.add() 放在函數(shù)里呢?

methods: {
    // 做節(jié)流處理
    add_throttle: throttle(() => {
        this.add();
    }, 1000),
    add() {
        this.number++;
    }
}

然后，自信滿滿地再次打開控制臺(tái)……

第一眼，誒，沒(méi)報(bào)錯(cuò)，于是點(diǎn)擊按鈕……

梅開二度……

其實(shí)還是 this 的指向問(wèn)題。我們知道箭頭函數(shù)是沒(méi)有 this 的，所以這里的 this 相當(dāng)于踩坑1里的 this ，讓我們打印下，揭開它的廬山真面目。

methods: {
    // 做節(jié)流處理
    add_throttle: throttle(() => {
        console.log(this);
    }, 1000),
    add() {
        this.number++;
    }
}

好家伙，原來(lái)這里的 this 本身就是 undefined 。

解決

既然是this的指向問(wèn)題，那么只要保證 this 指向vue實(shí)例就行了，箭頭函數(shù)換成聲明式函數(shù)。

methods: {
    // 做節(jié)流處理
    add_throttle: throttle(function () {
        this.add();
    }, 1000),
    add() {
        this.number++;
    }
}

結(jié)果很nice。

至于為什么，大概是lodash的 _.debounce 函數(shù)對(duì)this做了一些處理（ _.throttle 函數(shù)本質(zhì)還是調(diào)用了 _.debounce 函數(shù)），有興趣的小伙伴兒可以看看_.debounce的源碼。

到此這篇關(guān)于vue項(xiàng)目使用lodash節(jié)流防抖函數(shù)問(wèn)題與解決的文章就介紹到這了,更多相關(guān)vue使用lodash節(jié)流防抖函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: