ES6 代理：使用 debounce 设置属性陷阱，是否可以避免回调字典？

Question

目标：在用户输入时将任何更改的表单字段作为“名称-值”对，并在键入时进行去抖动。 示例模板（person 是双向绑定模型）。

<form>
  <q-input v-model="person.familyName" />
  <q-input v-model="person.givenName" />
  ...
</form>

我让它与 ES6 代理一起工作，但似乎有去抖动回调字典的代码气味：每个属性都将自己的回调放入字典中，以免干扰其他字段。

// callback per 'field name' to prevent from skipping changes
// while fast typing with Tab button to switch between fields.
const debounces: { [key: string]: (...args: any[]) => any } = {};

const person = new Proxy(someSourceModel, {
    set: (target, key: string, value, receiver) => {
        Reflect.set(target, key, value, receiver);

        if (!debounces[key])
            debounces[key] = debounce(300, (key, value) => // throttle-debounce lib
            {
                // Do anything with changed key-value pair.
                // For example, send it with update to Dexie/PouchDB as
                // single field instead of whole object.
                console.log(`${String(key)}: ${String(value)}`);

                delete debounces[key]; // Cleanup when it fired.
            });

        debounces[key](key, value); // Fire it!
        return true;
    }
});

有没有办法避免回调字典？

包括 Codesandbox 工作示例。

Answer 1

lodash-es/debounce可能解决方案：当另一个属性发生变化时，立即调用挂起的lodash-es/debounce “flush”。

let lastProperty: string;

const onChanged = debounce((key, value) => {
    // Do anything with changed key-value pair.
    // For example, send it with update to Dexie/PouchDB.
    console.log(`${String(key)}: ${String(value)}`);
}, 300);

const person = new Proxy(someSourceModel, {
    set: (target, key: string, value, receiver) => {
        Reflect.set(target, key, value, receiver);

        if (lastProperty != key) {
            lastProperty = key;
            onChanged.flush();
        }

        onChanged(key, value);
        return true;
    }
});

代码沙盒示例