使用 Lodash 消除 Vue 组件方法的抖动

Question

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

输入字段

<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 时都会创建一个新的去抖函数。您只需创建此函数一次，就像您在上面看到的那样，然后每次都调用该函数。