使用 Lodash 去抖 Vue 组件方法

Question

我正在尝试在 Vue 2 方法上使用 Lodash 的 debounce，以便仅在用户停止在输入字段中输入后运行，但我得到了意想不到的结果：

输入字段

<input type="text" v-model='filter.user' placeholder="search" @keyup='dTest'>

方法

 dTest() {
        const d = _.debounce(() => {
            console.log('hi');
        }, 2000);
        d();
    }

但是，'hi' 会在每次按键时记录到控制台，延迟两秒。

谢谢

Answer 1

将dTest更改为：

dTest = _.debounce(() => {
    console.log('hi');
}, 2000);

对于您的 dTest，每次 dTest 为运行时您都在创建一个新的去抖动函数。您应该只创建此函数一次，如上所示，然后每次都调用该函数。

Debouncing a Vue Component method with Lodash